使用Polymer.dart從動態添加的自定義元素內部操縱陰影DOM

這款最小聚合物應用程序具有一個可容納「軌道」的「瀏覽器」。瀏覽器需要能夠撥打render。軌道呈現時，會爲其影子DOM添加一個新的<p>節點。使用Polymer.dart從動態添加的自定義元素內部操縱陰影DOM

現在，調用render時，創建了ParagraphElement，並且沒有任何問題地找到父級「div＃insert-here」，但是將新創建的ParagraphElement添加到div的子級不會在瀏覽器中呈現。

如果我們改變了代碼中插入一個新的<p>到enteredView在ExampleBrowser的影子DOM，如預期的那樣<p>出現在瀏覽器。爲什麼它可以用於頂層自定義元素，而不是動態創建的自定義元素？

bugTest.dart

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

@CustomTag('example-browser') 
class ExampleBrowser extends PolymerElement { 
    @published ExampleTrack track; 

    ExampleBrowser.created() : super.created(); 

    @override 
    void enteredView() { 
     track = new Element.tag('example-track') 
     ..trackName = "Test Track"; 
    } 

    void renderTrack(MouseEvent e) { 
     track.render(); 
    } 
} 

@CustomTag('example-track') 
class ExampleTrack extends PolymerElement { 
    @published String trackName; 

    ExampleTrack.created() : super.created(); 

    void render() { 
     ParagraphElement testParagraph = new ParagraphElement() 
     ..text = "I don't seem to get added to the DOM :("; 
     $['insert-here'].children.add(testParagraph); 
    } 
    }

定製elements.html

<script type="application/dart" src="bugTest.dart"></script> 

<polymer-element name="example-browser"> 
    <template> 
    <h2>Browser</h2> 
    <button on-click="{{renderTrack}}">Render tracks</button> 
    <example-track trackName={{track.trackName}}></example-track> 
    </template> 
</polymer-element> 

<polymer-element name="example-track"> 
    <template> 
    <h3>{{trackName}}</h3> 
    <div id="insert-here"></div> 
    </template> 
</polymer-element>

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>BugTest</title> 
    <link rel="import" href="custom-elements.html"> 
    <script type="application/dart">export 'package:polymer/init.dart';</script> 
    <script src="packages/browser/dart.js"></script> 
    </head> 
    <body> 
    <h1>BugTest</h1> 
    <example-browser></example-browser> 
    </body> 
</html>

來源

2014-02-13 Rob Syme

我不認爲重複的元素列表正在工作。

您應該只重複模型數據。

你的代碼做什麼，是

<template repeat="{{track in tracks}}"> 
    <example-track></example-track> <!-- this element is created tracks.lenght times --> 
</template>

您tracks列表的內容完全被忽略（條目號旁），因爲你沒有在您的標記參考。如果您使用@observable List tracks = [1, 2, 3, 4, 5];

您應該調用render()代替ExampleTrack的attached()。

這樣，你從你的tracks列表數據的創建ExampleTrack

<template repeat="{{track in tracks}}"> 
    <example-track someattribute="{{track.aField}}"></example-track> 
</template>

如果你想觸發你產生ExampleTrack小號更新，修改綁定模型值（tracks[0].aField = 'someNewValue';），並讓ExampleTrack做些什麼在void someattributeChanged(old) { /* do something */ }

你必須小心，那tracks和它裏面的元素及其字段是可觀察的。在SO上搜索[dart] observable應該有足夠的例子。

來源

2014-02-13 07:21:50

感謝Günter的快速反應。在實際的應用程序中，重複模板中實例化的元素具有從每個軌道實例中提取的屬性。我也希望能夠根據需要重新渲染曲目。無論使用單個實例，問題似乎都會持續存在。我編輯了這個問題，以使這些要點更清晰。 –

我更新了我的答案。你應該真的重新考慮你的方法，這不是聚合物的工作原理。 –

現貨。添加void attributeChanged（old）{whatever}是獲得我想要做的更好的方法。感謝Günter！ –

使用Polymer.dart從動態添加的自定義元素內部操縱陰影DOM

回答

相關問題