为包含属性数据绑定的innerHTML分配标记时，聚合数据绑定不起作用 [英] Polymer data binding doesn't work when assigning markup to innerHTML that contains attribute data binding

问题描述

这是我的意思的一个例子 - http://jsfiddle.net/ry6og1q9/2/

 < paper-input inputValue ={{foo}}label =static foo>< / paper-input> 
  

staticFoo纸张输入是与{{foo}}绑定的数据 - 双向数据绑定。

  var c = this。$。dynamicFooPlaceHolder; 
 c.innerHTML =''; 
 var e = document.createElement（'div'）; 
 e.innerHTML ='< paper-input id =dynamicFooinputValue ={{foo}}label =dynamic foo>< / paper-input>'; 
 c.appendChild（e）;但是，使用innerHTML创建的dynamicFoo并不以任何方式绑定到foo属性，尽管如此，它的标记存在。
 
 
 
我已经尝试用Node.bind（）
  -   https://www.polymer-project.org/docs/polymer/node_bind.html  
但它只绑定一种方式。 / p> 
 
 
必须有一个平台实用程序才能进行解析/绑定，但是我无法找到它。
解决方案
所有聚合物元素（对于最近的版本）都有这种实用方法：
  / * * 
 *将包含与此元素绑定的标记的HTML注入
 *目标元素（替换目标元素内容）。 
 * @param String html注入
 * @param元素目标元素
 * / 
 injectBoundHTML：function（html，element）
  
所以你应该可以这样做：
  this.injectBoundHTML（'< paper-input id =dynamicFooinputValue ={{foo}}label =dynamic foo>< / paper-input>'，
 this。$ .dynamicFooPlaceHolder）; 
  
 
What is the simplest way to create data bindings to attributes, in Polymer, when working with innerHTML?

This is an example of what i mean - http://jsfiddle.net/ry6og1q9/2/
<paper-input inputValue="{{foo}}" label="static foo"></paper-input>
"staticFoo" paper-input is data bound to with {{foo}} - a two way data binding.
var c = this.$.dynamicFooPlaceHolder;
c.innerHTML = '';
var e = document.createElement('div');
e.innerHTML = '<paper-input id="dynamicFoo" inputValue="{{foo}}" label="dynamic foo"></paper-input>';
c.appendChild(e);
But "dynamicFoo", created with innerHTML, is not bound to the foo property in any way, although the markup for it exists.

I've tried to accomplish this with Node.bind() 
- http://www.polymer-project.org/docs/polymer/node_bind.html
but it binds only one way.

There must be a platform utility which makes the parsing/binding, but i can't find it anywhere.
解决方案
All Polymer elements (for recent releases) have this utility method:
/**
 * Inject HTML which contains markup bound to this element into
 * a target element (replacing target element content).
 * @param String html to inject
 * @param Element target element
 */
injectBoundHTML: function(html, element)
so you should be able to do something like:
this.injectBoundHTML('<paper-input id="dynamicFoo" inputValue="{{foo}}" label="dynamic foo"></paper-input>', 
  this.$.dynamicFooPlaceHolder);


                        
这篇关于为包含属性数据绑定的innerHTML分配标记时，聚合数据绑定不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！