聚合物Dom重复绑定到内容

本文介绍了聚合物Dom重复绑定到内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

在聚合物1.2.3中，dom-repeat是否可以使用内容作为模板并将值绑定到所提供的元素上?

In polymer 1.2.3, Is it possible for a dom-repeat to use content as a template and bind values to the elements provided?

自定义元素:

<dom-module id="modify-collection"> <template> <div> <template is="dom-repeat" items="[[collection]]"> <content></content> </template> </div> </template> </dom-module>

用法:

<modify-collection collection="{{things}}"> <list-item resource="[[item]]"></list-item> </modify-collection>

我在没有帮助的情况下查看了以下资源:

I've looked at the following resources without help:

聚合物:如何监视< content> ;属性

>聚合物1.0模板绑定引用等效

嵌套的聚合物元素之间的数据绑定

github/grappendorf/grapp-template-ref

github/Trakkasure/dom-bindref

github/Polymer/polymer/issues/1852

github/Polymer/polymer/pull/2196 更新2016-02-03 :来自Polymer团队(PR#2196)，计划在将来为此提供更好的支持，以帮助解决某些缺点.

github/Polymer/polymer/pull/2196 Update 2016-02-03: From the Polymer Team(PR #2196), better support for this is planned in the future, to help address some of the shortcomings.

推荐答案

TLDR

解决方案2稍显冗长，但效果最好.它还允许您动态地选择模板，也许基于模型的属性. (请参阅解决方案2:高级示例)

TLDR

Solution 2 while a little more verbose, seems to work best. It also allows you to dynamically choose your template, perhaps based on a model's attributes. (See Solution 2: Advanced Example)

在这个简单的示例中，发生了很多事情，包括模板化，在阴影，阴影和浅色阴影之间获取"内容，当然还有数据绑定.

A Lot of stuff is happening in this simple example including templatizing, "getting" content between shadow?, shady, and light doms, and of course data-binding.

这个问题提供了一些见识，但是没有Polymer 0.5's injectBoundHtml，它实际上是行不通的(使用在Polymer元素内的光线dom中定义的模板).问题在于，当我们尝试使用innerHTML将元素复制到模板时，我们的数据绑定似乎丢失了(AFAIK).

This question provided some insight, but without Polymer 0.5's injectBoundHtml it wasn't really workable (Using template defined in light dom inside a Polymer element). The problem being that our data-bindings seem to get lost (AFAIK) when we try to copy an element using innerHTML to our template.

因此，否则，我们将无法使用数据绑定即时创建模板.因此，这两种解决方案都会提前将内容包装在模板中.这会导致html处于惰性状态，并允许Polymer在适当的时间进行数据绑定( www. html5rocks/en/tutorials/webcomponents/template/).

So without that we can't create our template on the fly with data-bindings. Thus both solutions wrap the content in a template ahead of time; this caused the html to be inert and allows Polymer to data-bind at the appropriate time (www.html5rocks/en/tutorials/webcomponents/template/).

如果您真的想了解所有内容，建议您阅读lib/template/dom-repeat.html，lib/template/templatizer.html，lib/annotations/annotations.html的聚合物src(约1500行).

If you really want to understand everything, I'd recommended reading the Polymer src for lib/template/dom-repeat.html, lib/template/templatizer.html, lib/annotations/annotations.html (~1500 lines).

请参见下面的债务人答案以获取改进解决方案1.

See btelle's answer below for an improved solution 1.

请注意，这种方法会导致dom-repeat不会自动呈现内容，因此我们将其手动称为呈现.

Note, this approach causes dom-repeat to not render content automatically, so we call render manually.

<dom-module id="modify-collection"> <template> <div> <content></content> <template id="repeater" is="dom-repeat" items="[[collection]]"></template> </div> </template> <script> ... ready: function() { this.$.repeater.templatize(this.querySelector('#templ')); } _changeCollection: function(item) { this.push('collection', item); this.$.repeater.render(); } </script> </dom-module>

用法

<modify-collection collection="{{things}}"> <template id="templ"><list-item resource="[[item]]"></list-item></template> </modify-collection>

请注意，此用法与元素1不同，因为<template>必须具有is="dom-template"属性.

Note, that the usage of this varies from element 1, in that the <template> must have an is="dom-template" attribute.

(从此PR稍作修改: github/Polymer/polymer/pull/2196，最初基于 github/grappendorf/grapp-template-ref )

(Slightly modified from this PR: github/Polymer/polymer/pull/2196, originally based on github/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 polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 polymer.github.io/PATENTS.txt --> <!-- Portions of this code have been adapted from the `grapp-template-ref` element. The original copyright notices are below. --> <!-- MIT License Copyright (c) 2014-2015 Dirk Grappendorf, www.grappendorf Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. --> <!-- The `dom-ref` element is a custom `HTMLTemplateElement` type extension that can be used to reference another template by id using the `ref` property. `dom-bindref` accepts a `bind` property to bind an object to the referenced template. By default the bound object can be accessed as `item`, this can be changed using the `as` property. Example: ```html <template is="dom-template" id="template-bind"><span>[[item.key]]</span></template> <template is="dom-ref" ref="template-bind" bind='{"key":"value"}'></dom-ref> ``` --> <!-- <link rel="import" href="templatizer.html"> --> <script> Polymer({ is: 'dom-ref', extends: 'template', /** * Fired whenever DOM is added or removed by this template (by * default, rendering occurs lazily). To force immediate rendering, call * `render`. * * @event dom-change */ properties: { /** * Reference to another template's id. */ ref: { type: String, observer: '_refChanged' }, /** * Object to be bound to referenced template. */ bind: { type: Object, observer: '_bindChanged' }, /** * The name of the variable to add to the binding scope for the * element associated with a given template instance. */ as: { type: String, value: 'item' } }, behaviors: [ Polymer.Templatizer ], ready: function() { this.templatize(this); }, attached: function() { return this._stamp(); }, detached: function() { return this._removeChildren(); }, _refChanged: function(newRef, oldRef) { if (oldRef) { this._removeChildren(); return this._stamp(); } }, _bindChanged: function(newBind, oldBind) { if (oldBind) { this._removeChildren(); return this._stamp(); } }, _stamp: function() { var root, template, templateRoot, bind = {}; this._parent = Polymer.dom(this).parentNode; root = this._parent; while (Polymer.dom(root).parentNode) { root = Polymer.dom(root).parentNode; } template = Polymer.dom(root).querySelector("template#" + this.ref); // Check For Light Dom Elements that may be passed to this shadow root (Useful for: `<content></content>`) if (!template) { template = root.host.querySelector("template#" + this.ref); } // Check the whole document if (!template) { template = document.querySelector("template#" + this.ref); } bind[this.as] = this.bind; // templateRoot = template.stamp(bind).root; // Use this method until this lands: github/Polymer/polymer/pull/1889 templateRoot = (new template.ctor(bind, template)).root; this._children = Array.prototype.slice.call(templateRoot.childNodes); return Polymer.dom(this._parent).insertBefore(templateRoot, this); }, _removeChildren: function() { var child, i, len, ref, results; if (this._children) { ref = this._children; results = []; for (i = 0, len = ref.length; i < len; i++) { child = ref[i]; results.push(Polymer.dom(this._parent).removeChild(child)); } return results; } } }); </script>

元素

<dom-module id="modify-collection"> <template> <div> <content></content> <template is="dom-repeat" items="[[collection]]"> <template is="dom-ref" bind="[[item]]" ref="templ"></template> </template> </div> </template> </dom-module>

用法

<modify-collection collection="{{things}}"> <template id="templ" is="dom-template"><list-item resource="[[item]]"></list-item></template> </modify-collection>

高级元素

用法不变.

Advanced Element

Usage does not change from above.

我们在这里做的是引入一个间接级别，允许我们包装传递给元素的模板(在我们的示例中，带有一个覆盖层).

What we do here is introduce a level of indirection, allowing us to wrap a template passed to our element (in our example, with an overlay).

<dom-module id="modify-collection"> <template> <div> <content></content> <template id="wrapper" is="dom-template"> <div class="overlay"> <template is="dom-ref" bind="[[item]]" ref="templ"></template> </div> </template> <template is="dom-repeat" items="[[collection]]"> <template is="dom-ref" bind="[[item]]" ref="[[_templateRef(_overlayMode)]]"></template> </template> </div> </template> <script> ... properties: { _overlayMode: { type: Boolean, value: false } }, _templateRef: function(overlayMode) { return overlayMode ? 'wrapper' : 'templ'; } </script> </dom-module>