是否可以创建一个没有Html的Polymer元素？ [英] Is it possible to create a Polymer element without Html?

问题描述

我的最终目标是不用这样编写HTML：

My final objective is don't have to write HTML like this:

<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。例如我试过这样：

I would like to know if it is possible to create a Polymer-element without using HTML. For example I tried this:

@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和shadow根，不会在 @observable计数器和 DivElement 的文本之间创建绑定。

Previous code creates HTML and shadow root correctly, but it doesn't create the binding between the @observable counter and the text of the DivElement.

我知道这是因为我试图在元素实例化/创建后创建影子根。所以我应该在模板与其observable绑定之前在其他地方创建元素的模板。

I know that this is caused because I am trying to create the shadow root after the element has been instantiated/created. So that I should create the template of the element in other place before the template has been bound with its observable.

推荐答案

编写手动数据绑定，如下所示：

You can write a manual data binding like this:

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

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

changes is a property of the Observable class, which PolymerElement mixes in. (This is difficult to see in the API reference, as it currently doesn't show a class' mixins or the mixed in properties and methods.)

Polymer似乎主要是关于实现基于声明式html的绑定。它可能值得探索直接使用自定义元素和影子dom，因为你没有真正使用聚合物的任何东西在这个例子中。为此，您需要将类定义更改为：

Polymer seems to be mostly about enabling declarative html based bindings. It may be worth exploring using custom elements and shadow dom directly, as you're not really using polymer for anything in this example. To do this you need to change the class definition to:

   class TuteStopWatch extends HtmlElement with Observable {
     ...
   }

使用 document.register（）。您还需要为自定义元素添加polymer.js polyfill。

And register your element with document.register(). You also need to include the polymer.js polyfill for custom elements.

这篇关于是否可以创建一个没有Html的Polymer元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！