Question

从这个答案https://stackoverflow.com/a/26891895/2117440，我知道可以绑定引用的模板。但是，当我这样做时：

<polymer-element name="data-ul" extends="ul" attributes="items">
  <!-- this is the replacement of content tag -->
  <template repeat="{{item in items}}">
    <template bind="{{item}}" ref="itemTemplate"></template>   
    <input type="button" value="Add Item" on-click="{{addItem}}"/>
  </template>
  <script type="application/dart" src="data-ul.dart"></script>
</polymer-element>

和各自的飞镖类：

@CustomTag('data-ul')
class DataUl extends LiElement with Polymer, Observable {
  DataUl.created() : super.created();

  @published List items;

  void parseDeclaration(Element elementElement) {
    var t = this.querySelector('#itemTemplate'); // Gets the template with id itemTemplate from the content html
    if(t != null)  // if not null
      elementElement.append(t); // append itemTemplate to elementElement

    super.parseDeclaration(elementElement); // call super
  }

  void addItem(Event e) {
    var item = nodeBind(e.target).templateInstance.model['item'];
    items.add(item);
  }
}

项目会正确添加到模型中，但itemTemplate不会再次呈现。我认为这是因为itemTemplate已从作用域中删除，因此无法再次进行渲染。

我应该使用其他方法代替parseDeclaration吗？

我应该将itemTemplate插入其他地方吗？

Answer 1

我们应该使用elementElement：

，而不是使用element.templateContent

@CustomTag('data-ul')
class DataUl extends LiElement with Polymer, Observable {
  DataUl.created() : super.created();

  @published List items;

  void parseDeclaration(Element elementElement) {
    // We need to remove previous template from element.templateContent
    // in that way it no continues adding a new content every time that we instantiate 
    // this component.
    var previousTemplate = element.templateContent.querySelector('#itemTemplate');
    if(previousTemplate != null)
      previousTemplate.remove();

    var t = this.querySelector('#itemTemplate'); // Gets the template with id itemTemplate from the content html
    if(t != null)  // if not null
      element.templateContent.append(t); // append itemTemplate to element.templateContent
    else
      element.templateContent.append(new TemplateElement()..id='itemTemplate');  //if no template is added append an empty template to avoid errors

    super.parseDeclaration(elementElement); // call super
  }

  void addItem(Event e) {
    var item = nodeBind(e.target).templateInstance.model['item'];
    items.add(item);
  }
}

在聚合物飞镖中插入外部参考模板的正确方法？

1 个答案: