Question

我的最终目标是不必像这样写HTML：

<div id='counter'>
     {{counter}}
  </div>

  <div>
     <button
        id="startButton"
        on-click="{{start}}">
        Start
     </button>
     <button
        id="stopButton"
        on-click="{{stop}}">
        Stop
     </button>
     <button
        id="resetButton"
        on-click="{{reset}}">
        Reset
     </button>
</div>

我想知道是否可以在不使用HTML的情况下创建Polymer-element。例如，我试过这个：

@CustomTag('tute-stopwatch')
class TuteStopWatch extends PolymerElement {

ButtonElement startButton,
  stopButton,
  resetButton;

  @observable String counter = '00:00';

  TuteStopWatch.created() : super.created() {
    createShadowRoot()..children = [
      new DivElement()..text = '{{counter}}',

      new DivElement()..children = [
        startButton = new ButtonElement()..text = 'Start'
           ..onClick.listen(start),
        stopButton = new ButtonElement()..text = 'Stop'
           ..onClick.listen(stop),
        resetButton = new ButtonElement()..text = 'Reset'
           ..onClick.listen(reset)
      ]
    ];
  }
}

以前的代码正确创建HTML和影子根，但它不会在@observable counter和DivElement的文本之间创建绑定。

我知道这是因为我在实例化/创建元素后尝试创建阴影根。因此，在模板与其可观察对象绑定之前，我应该在其他位置创建元素的模板。

Answer 1

您可以编写如下手动数据绑定：

   changes.listen((changes) {
     for (var change in changes) {
        if (change.name == #counter) {
           myDivElement.text = change.newValue;
        }
     }
   });

changes是Observable类的属性，PolymerElement混入。（这在API参考中很难看到，因为它目前没有显示class＆＃39; mixins或混合的属性和方法。）

Polymer似乎主要是关于启用基于声明的基于html的绑定。可能值得直接使用自定义元素和阴影dom进行探索，因为在此示例中您并未真正使用聚合物。为此，您需要将类定义更改为：

   class TuteStopWatch extends HtmlElement with Observable {
     ...
   }

使用document.register()注册您的元素。您还需要将polymer.js polyfill包含在自定义元素中。

是否可以在没有Html的情况下创建Polymer元素？

1 个答案: