在聚合物1.2.3中,是否可以dom-repeat使用内容作为模板并将值绑定到所提供的元素？
自定义元素:
用法:
我在没有帮助的情况下查看了以下资源:
Polymer:如何监视
Polymer 1.0模板绑定ref等效
嵌套聚合物元素之间的数据绑定
https://github.com/grappendorf/grapp-template-ref
https://github.com/Trakkasure/dom-bindref
https://github.com/Polymer/polymer/issues/1852
https://github.com/Polymer/polymer/pull/2196
解决方案2虽然更加冗长,但似乎效果最好.它还允许您动态选择模板,可能基于模型的属性.(参见解决方案2:高级示例)
在这个简单的例子中发生了很多事情,包括模板化,"获取"阴影,阴影和光线之间的内容,当然还有数据绑定.
这个问题提供了一些见解,但没有Polymer 0.5's injectBoundHtml它实际上是不可行的(使用在Polymer元素内的光dom中定义的模板).问题在于,当我们尝试使用innerHTML将元素复制到模板时,我们的数据绑定似乎会丢失(AFAIK).
因此,如果没有这个,我们就无法使用数据绑定动态创建模板.因此,两个解决方案都提前将内容包装在模板中; 这导致html变为惰性,并允许Polymer在适当的时间进行数据绑定(http://www.html5rocks.com/en/tutorials/webcomponents/template/).
如果你真的想明白了一切,我会推荐阅读聚合物src为lib/template/dom-repeat.html,lib/template/templatizer.html,lib/annotations/annotations.html(〜1500行).
请参阅下面的btelle答案以获得改进的解决方案1.
注意,这种方法导致dom-repeat不自动呈现内容,因此我们手动调用render.
请注意,使用此内容的方法因元素1而异,因为必须具有is="dom-template"属性.
(稍微修改一下这个PR:https://github.com/Polymer/polymer/pull/2196,最初基于https://github.com/grappendorf/grapp-template-ref)
!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt -->元件
用法
高级元素
用法不会从上面改变.
我们在这里做的是引入一个间接层,允许我们包装传递给我们元素的模板(在我们的例子中,带有叠加层).
FWIW,看起来以下工作与解决方案1一样,并添加通知路径(以及自动绑定/更改等):
然后使用这个:
[[item.id]]: [[item.name]]
京公网安备 11010802040832号 | 京ICP备19059560号-6 