Polymers模板自动绑定中断模型属性？ [英] Does Polymers template auto-binding break model property?

问题描述

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

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

我的代码如下所示：

 < template id =rootis =auto-binding> 
列出
< 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 这里，你可以看到这里是jsbin.com/fibuc/1/quiet 它不起作用。 （Chrome Canary，Chrome Stable，IE，Firefox）。

看来，如果我将 list 直接分配给模板工作原理： 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：第三个
] 
}; 
}，1000）; 
  

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

---

编辑：如果可能，我想让脚本不知道使用模板的方式：< ; template bind> 或< template is =auto-binding> 。
在我的案例中，脚本代码位于自定义元素 puppet-js 内，它只提供来自服务器到给定节点，并且外部应用程序负责创建模板。

解决方案

c>< template is =auto-binding> 位于 http://www.polymer-project.org/docs/polymer/databinding-advanced.html#autobinding

这里的例子说明直接在< template> 上设置绑定变量，而不是通过模型。如果你使用Polymer元素中的模板，你会这么做，我相信这个想法是保持这种使用模式，而不是像你一样与模型交互。使用非自动绑定 < template> 。

这就是说，如果你确实想要设置模型，似乎工作的是在模板绑定事件被触发后这么做 - 你的 setTimeout（）已经接近这个数字，但是听起来这个事件显然更清晰。下面是一个例子（ jsbin ）：

  var template = document.getElementById（root）; 
 template.addEventListener（'template-bound'，function（）{
 template.model = {
list：[
 {desc：first}， 
 {desc：second}，
 {desc：third} 
] 
}; 
}）; 
  

编辑：看相关的源代码，似乎忽略了 < code>< template>< / code>的模型最初是有意的，它给出了一些关于为什么设置 model 在模板绑定后工作，如果您确实想要的话。

I'm trying to use <template is="auto-binding"> to use Polymer Expressions inside my template.

As for any other <template bind> I activate a template, by attaching model property, as described at Polymer Docs

My code looks as follows:

<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, as you can see here jsbin.com/fibuc/1/quiet it does not work. (Chrome Canary, Chrome Stable, IE, Firefox).

It seems that, if I assign list directly to template it works: http://jsbin.com/fibuc/3/quiet

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

What is really weird, it still works with .model if I delay attaching a bit: http://jsbin.com/fibuc/2/quiet

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

Is it a bug, or am I doing something wrong?

---

Edit: If possible, I would like to keep the script unaware of way template was used: <template bind> or <template is="auto-binding">. In my case script code is inside Custom Element puppet-js that only provides data from server to given node, and the outer application is responsible to create templates.

解决方案

The best set of docs for <template is="auto-binding"> are at http://www.polymer-project.org/docs/polymer/databinding-advanced.html#autobinding

The examples there illustrate setting the bound variables on the <template> directly, rather than going through the model. It's what you would do if you were using the template from within a Polymer element, and I believe the idea is to maintain that usage pattern rather than interacting with the model like you would with a non-auto-binding <template>.

That being said, if you do want to set the model, what seems to work is to do so after the template-bound event is fired—your setTimeout() was approximating that, but it's obviously cleaner to just listen for that event. Here's an example (jsbin):

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

EDIT: Looking at the relevant source code, it appears that ignoring the model property of the <template> initially is intentional, and it gives some insight as to why setting model after template-bound works if you really want to do that.

这篇关于Polymers模板自动绑定中断模型属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！