Question

我正在尝试使用<template is="auto-binding">在我的模板中使用Polymer Expressions。

对于任何其他<template bind>我通过附加模型属性激活模板，如Polymer Docs

所述

我的代码如下：

<template id="root"  is="auto-binding">
    List
    <ul>
    <template repeat="{{ item in list }}">
        <li>{{item.desc}}</li>
    </template>
    </ul>
</template>
<script type="text/javascript">
    var template = document.getElementById( "root" );

    template.model = {
      "list": 
          [{
            "desc": "first"
          }, {
            "desc": "second"
          }]
      };
</script>

JSBin here，正如您所见，here jsbin.com/fibuc/1/quiet它不起作用。（Chrome Canary，Chrome Stable，IE，Firefox）。

看来，如果我将list直接分配到template，那就可以了：http://jsbin.com/fibuc/3/quiet

template.list = 
  [{
    "desc": "first"
  }, {
    "desc": "second"
  }, {
    "desc": "third"
  }];

什么是真的很奇怪，如果我延迟附加一点，它仍适用于.model：http://jsbin.com/fibuc/2/quiet

setTimeout( function () {
  template.model = {
    "list": 
      [{
        "desc": "first"
      }, {
        "desc": "second"
      }, {
        "desc": "third"
      }]
    };
  },1000);

这是一个错误，还是我做错了什么？

修改：如果可能，我想让脚本不知道使用的方式模板：<template bind>或<template is="auto-binding">。在我的例子中，脚本代码位于Custom Element puppet-js中，它只提供从服务器到给定节点的数据，外部应用程序负责创建模板。

Answer 1

<template is="auto-binding">的最佳文档集位于http://www.polymer-project.org/docs/polymer/databinding-advanced.html#autobinding

这里的例子说明了直接在<template>上设置绑定变量，而不是通过model。这是你在Polymer元素中使用模板时会做的事情，我相信这个想法是保持这种使用模式，而不是像使用非model那样与auto-binding进行交互。 <template>。

话虽如此，如果您确实想要设置模型，那么在template-bound事件被触发后，似乎有效的方法就是这样做 - 您的setTimeout()近似于此，但它显然更清晰只是听那个事件。这是一个例子（jsbin）：

  var template = document.getElementById("root");
  template.addEventListener('template-bound', function() {
    template.model = {
      "list": [
        {"desc": "first"},
        {"desc": "second"},
        {"desc": "third"}
      ]
    };
  });

编辑：查看relevant source code，似乎有意忽略model <template>属性，并且有一些见解为什么在model之后设置template-bound，如果你真的想这样做的话。

聚合物模板是否自动绑定中断模型属性？

1 个答案: