dart-polymer 更新聚合物 dom 元素答案

【问题标题】：dart-polymer update polymer dom elementsdart-polymer 更新聚合物 dom 元素
【发布时间】：2014-02-20 11:54:18
【问题描述】：

我正在使用此模板创建一个通知条目列表，第一次可以正常工作。

NoticeList nle = querySelector('#noticeList');
nle.notices = notices;

但我第二次调用此代码时，网站根本没有改变。我错过了什么吗？

谢谢

<polymer-element name="notice-list">
   <template>
     <ul id = "noticeEntrys">
        <template repeat="{{notice in notices}}">
          <li>
            <notice-element notice={{notice}}></notice-element>
          </li>
        </template>
      </ul>
    </template> 
  <script type="application/dart" src="notice_list.dart"></script>
</polymer-element>

 <polymer-element name="notice-element">
  <template>
    <div class="notice">
      <textarea rows="8" readonly>{{notice.getText()}}</textarea>
      <div class="controlls">
        <button type="button" name="delete" on-click={{delete}}>Delete</button>
        <button type="button" name="change" on-click={{change}}>Change</button>
      </div>
    </div>
  </template> 
  <script type="application/dart" src="notice_element.dart"></script>
</polymer-element>

@CustomTag('notice-list')
class NoticeList extends PolymerElement {
  NoticeList.created() : super.created() {
  }

  @published List<Notice> notices;
}

@CustomTag('notice-element')
class NoticeElement extends PolymerElement {
  NoticeElement.created() : super.created() {
  }

  @published Notice notice;

  void delete(Event e, var detail, Node target) {
    Datamanager.removeNotice(notice);
    Controller.updateListe();
  }

  void change(Event e, var detail, Node target) {
    Controller.updateActiveElement(notice);
  }

  void setNotice(Notice n)  {
    notice = n;
  }  
}

编辑：我更新代码的方式与第一次设置列表的方式相同我通过网络服务获取新数据并且新数据是正确的

static void noticesLoadedPolymerList(List<Notice> notices) {
    NoticeList nle = querySelector('#noticeList');
    nle.setNotices(notices);
  }

Edit2：我添加了一个简单的整数来显示列表大小 @observable int listSize; 如果我分配新列表但显示的内容没有，则值会更改。

【问题讨论】：

您能否添加您如何创建更新notices 列表的代码？您提供的代码看起来不错。
@GünterZöchbauer 我添加了一些额外的信息可能会有所帮助，因为我现在真的很困惑为什么它不起作用
在将toObservable(notices) 分配给聚合物元素之前，您是否尝试过？仍然看不到您创建列表的位置。
how to implement a main function in polymer apps 的可能重复项

标签： dart dart-polymer

【解决方案1】：

如果您将NoticeList 中的notices 设置为新的List 实例，它应该会识别出更改。如果您在第一次尝试中分配 notices 并且仅在第二次尝试中进行修改，则您必须使您的 notices 列表可观察到 var notices = toObservable([new Notice('notice1'), new Notice('notice2'), ...])。

您尚未提供 Notice 类的代码。可能有必要让您的 Notice 类可观察，例如：

class Notice 用 Observable { 扩展 Object @observable 字符串文本； }

这样，Polymer 可以识别是否只有通知实例的属性发生更改（不更改（添加/删除）notices 列表。

【讨论】：

【解决方案2】：

终于有时间解决问题了。

我的问题是我会像这样开始聚合物

initPolymer();

我什么时候应该这样开始的

 initPolymer().run(() {
   //initialization and other stuff
 }

您可以在此处找到更多相关信息https://code.google.com/p/dart/issues/detail?id=15379

【讨论】：