Question

删除和重新添加聚合物元素实例会破坏数据绑定。调用prepareElement（）会重新连接所有内容，但这是最好的方法吗？

<body>           
  <click-counter id="click_counter_id" count="5"></click-counter>    
</body>

和代码

main() {
  Logger.root.level = Level.ALL;
  Logger.root.onRecord.listen((LogRecord rec) {   
    print('${rec.loggerName}: ${rec.level.name}: ${rec.time}: ${rec.message}');
  });

  initPolymer().run(() {

    Polymer.onReady.then((_) {            

      var elem = querySelector('#click_counter_id');
      var parent = elem.parent;

      elem.remove();         

      new Timer(new Duration(seconds:1), () {

        parent.children.add(elem);

        // This reconnects the bindings. Is it correct?
        (elem as PolymerElement).prepareElement();
      });
    });
  });            
}

一切似乎确定。但随后我们会收到警告：

polymer.events: FINE: event: [button].on-click => [click-counter].increment())
polymer.unbind: FINE: [click-counter] cancelUnbindAll
polymer.unbind: WARNING: [click-counter] already unbound, cannot cancel unbindAll
polymer.events: FINE: event: [button].on-click => [click-counter].increment())

有没有更好的方法来移除和重新添加聚合物元素实例？

Answer 1

我自己没试过，但看起来很合理。我希望作者不介意从Detached observables when re-using element.

中回答他的答案

查看了polymer.js信息位后，我发现有一个cancelUnbindAll函数，必须在创建元素或将preventDispose属性设置为true时调用。

对于可能需要这样做的任何人，在Dart实现中，您必须在超级调用后调用leftView函数中的cancelUnbindAll，如下所示：

void detached() {
    super.leftView();
    this.cancelUnbindAll(preventCascade: true);
}

或者，您可以简单地覆盖自定义元素中的preventDispose属性：

bool get preventDispose => true;

修改

还有一个preventDispose看到https://github.com/Polymer/polymer/issues/312

删除和重新添加聚合物元素实例的正确方法是什么？

1 个答案:

修改