Polymer-Dart Equivalent Functions

问题

I'm trying to work through a Google I/O codelab for the Material Design Web App, but port it to the Dart language. http://io2014codelabs.appspot.com/static/codelabs/polymer-build-mobile/#4

I'm at the step where you toggle the drawer, but I can't figure out the dart equivalent.

The JS code to toggle the drawer looks like this:

<script>
  Polymer('codelab-app', {
    toggleDrawer: function() {
      this.$.drawerPanel.togglePanel();
    }
  });
</script>

I have tried the following in my CodelabApp class, but I get a NoSuchMethodError: method not found: 'togglePanel'

@CustomTag('codelab-app')
class CodelabApp extends PolymerElement {
  CodelabApp.created() : super.created() {}
  void toggleDrawer() {
    querySelector('core-drawer-panel')..togglePanel();
  }
}

my button element properly fires, but I can't figure out how to call the drawer's togglePanel method. <paper-icon-button icon="menu" on-click="{{toggleDrawer}}"></paper-icon-button>

any help or direction to the proper docs would be greatly appreciated.

UPDATE:

This has been fixed in recent versions: https://github.com/dart-lang/core-elements/issues/39

Updating the polymer and core_elements libraries works as expected.

回答1:

While attempting to commit my own fix to this, I discovered a temporary workaround that works in my case. Maybe will work for you :)

Add the following to the top of your file:

import 'dart:js' show JsObject;

_js(x) => new JsObject.fromBrowserObject(x);

Then change your custom tag code:

@CustomTag('codelab-app')
class CodelabApp extends PolymerElement {
  CodelabApp.created() : super.created() {}
  void toggleDrawer() {
    _js(shadowRoot.querySelector('core-drawer-panel')).callMethod('togglePanel');
  }
}

For reference I found this solution by reading through the code here: https://github.com/dart-lang/core-elements/blob/master/example/core_drawer_panel.html#L68-L81

来源：https://stackoverflow.com/questions/24509067/polymer-dart-equivalent-functions

标签

dart

dart-polymer