使用 Polymer.dart 从动态添加的自定义元素内部操作影子 DOM

这个最小的聚合物应用程序有一个保存"曲目"的'浏览器'。浏览器需要能够在其轨道上调用render。当轨道渲染时，它会向其影子 DOM 添加新的<p>节点。

就目前而言，render被调用，就会创建 ParagraphElement，并且可以毫无问题地找到父级"div#insert-here"，但是将新创建的 ParagraphElement 添加到div 的子项中不会在浏览器中呈现。

如果我们更改代码以在 enteredView 期间将新<p>插入 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);
    }
  }

自定义元素.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>

索引.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>

我不认为重复元素列表是有效的。

只应重复模型数据。

你的代码做什么，是

<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];，您将获得相同的示例

您应该改为在ExampleTrack的attached()中调用render()。

这样，您就可以将数据从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应该有足够的例子。

相关内容

最新更新

热门标签：