1

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

就目前而言，render被调用，创建了 ParagraphElement 并且没有任何麻烦地找到父级“div#insert-here”，但是将新创建的 ParagraphElement 添加到 div 的子级不会在浏览器中呈现。

如果我们更改代码以在enteredView 期间<p>向ExampleBrowser 的shadow dom 中插入一个新的，<p>则会按预期出现在浏览器中。为什么它适用于顶级自定义元素，而不适用于动态创建的自定义元素？

错误测试.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>
4

1 回答 1

2

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

您应该只重复模型数据。

您的代码的作用是

<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];

您应该改为调用's render()。ExampleTrackattached()

这样您就可以从tracks列表中获取数据到您创建的ExampleTrack

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

如果您想在生成ExampleTrack的 s 中触发更新，请更改绑定的模型值 ( tracks[0].aField = 'someNewValue';) 并让ExampleTrack执行某些操作void someattributeChanged(old) { /* do something */ }

您必须小心，其中tracks的元素及其字段是可观察的。在 SO 上搜索[dart] observable应该有足够的例子。

于 2014-02-13T07:21:50.230 回答