是否可以創建一個沒有Html的聚合物元素？

我的最終目標是不用寫HTML這樣的：是否可以創建一個沒有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創建一個聚合物元素。例如，我想這：

@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的文本之間的結合。

我知道這是因爲我試圖在實例化/創建元素後創建影子根。所以我應該在模板綁定其可觀察值之前在其他位置創建元素的模板。

來源

2014-03-27 Luis Vargas

你可以寫一本手冊數據綁定這樣的：

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

changes是Observable類，PolymerElement混入（這是很難在API參考看到的屬性，因爲它目前沒有按'不顯示類'mixins或混合的屬性和方法。）

聚合物似乎主要是關於啓用基於聲明的基於HTML的綁定。這可能是值得探索使用自定義元素和陰影直接，因爲在這個例子中你並沒有真正使用聚合物。要做到這一點，你需要的類定義更改爲：

class TuteStopWatch extends HtmlElement with Observable { 
    ... 
    }

並與document.register()註冊你的元素。您還需要爲定製元素添加polymer.js填充。

來源

2014-03-28 10:48:24

我猜'counterChanged（old）{xxx}'也會起作用，不是嗎？ –

我不知道，是聚合物的功能嗎？我沒有使用聚合物。我剛剛使用自定義元素和可觀察包，因爲這意味着我只需要小的自定義元素polyfill，而不是所有的影子dom和html導入的東西。 –

這是一個可觀察的功能。如果'@ observable'或'@ published'字段'xxx'被修改'xxxChanged（oldVal）'被調用。 –

是否可以創建一個沒有Html的聚合物元素？

回答

相關問題