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

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.

我知道这是因为我在实例化/创建元素后尝试创建阴影根.因此,在模板与其observable绑定之前,我应该在其他位置创建元素的模板.

Answer 1

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

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

changes是Observable类的一个属性,PolymerElement混入其中.(这在API参考中很难看到,因为它目前没有显示类'mixins或混合的属性和方法.)

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

   class TuteStopWatch extends HtmlElement with Observable {
     ...
   }

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