自动绑定模型中的 Polymer Dart $[] 选择器答案

【问题标题】：Polymer Dart $[] selector in an autobinding model自动绑定模型中的 Polymer Dart $[] 选择器
【发布时间】：2014-09-14 22:16:07
【问题描述】：

由于 polymer-body 已被移除，我们需要使用自动绑定模板来使用 PolymerElement 之外的聚合物绑定功能：

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample app</title>
    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
    <link rel="import" href="packages/polymer/polymer.html">
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
      <template is="auto-binding-dart">
        <div>Say something: <input value="{{value}}"></div>
        <div>You said: {{value}}</div>
        <button id="mybutton" on-tap="{{buttonTap}}">Tap me!</button>
      </template>

      <script type="application/dart">
        import 'dart:html';
        import 'package:polymer/polymer.dart';
        import 'package:template_binding/template_binding.dart';

        main() {
          initPolymer().run(() {
            Polymer.onReady.then((_) {
              var template = document.querySelector('template');
              templateBind(template).model = new MyModel();
            });
          });
        }

        class MyModel extends Observable {
          //$['mybutton'] wont works there
          @observable String value = 'something';
          buttonTap() => print('tap!');
        }
      </script>
  </body>
</html>

不幸的是，整个模型现在扩展了 Observable，每个绑定似乎都可以工作，but the PolymerElement array selector $['foo'] 不能再使用了...

有没有什么简单的方法可以将这个 $['id'] 选择器实现到 Observable 模型中？

【问题讨论】：

标签： dart dart-polymer

【解决方案1】：

我建议使用普通的 Polymer 元素而不是 auto-binding-dart。
然后你不必关心差异，你不需要'主要'。我总是使用 <app-element> Polymer 元素来启动 Polymer 项目，该元素充当 main() 和整个应用程序的容器。

我也建议不要使用内联代码。
据我所知，它有一些限制，尤其是不支持调试（可能已经修复，我不知道，因为我从不使用它）。

要使$ 工作，您需要一个小而简单的解决方法；

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:template_binding/template_binding.dart';


Map<String, dynamic> $; // we define our own '$'

main() {
  initPolymer().run(() {
    Polymer.onReady.then((_) {
      var template = document.querySelector('template') as Polymer;
      $ = template.$;             // we assign template.$ to our own '$' so we can omit the 'template' part
      templateBind(template).model = new MyModel();
    });
  });
}

class MyModel extends Observable {
  //$['mybutton'] wont work there - it can't because this is outside of a method
  @observable String value = 'something';
  buttonTap() {
    print($['mybutton'].id); // here it works
    print('tap!');
  }
}

【讨论】：

而且我认为如果你使用普通的聚合物元素（如 Gunter 所写，你可以很容易地将你的应用程序嵌入到你想要的任何站点或应用程序中（例如具有许多应用程序的仪表板）
测试也更容易。