【问题标题】:Polymer data binding doesn't work when assigning markup to innerHTML that contains attribute data binding将标记分配给包含属性数据绑定的 innerHTML 时,聚合物数据绑定不起作用
【发布时间】:2014-08-21 18:23:26
【问题描述】:

在使用innerHTML 时,在Polymer 中创建与属性的数据绑定的最简单方法是什么?

这是我的意思的一个例子 - 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="dynamicFoo" inputValue="{{foo}}" label="dynamic foo"></paper-input>';
c.appendChild(e);

但是使用 innerHTML 创建的“dynamicFoo”不以任何方式绑定到 foo 属性,尽管它的标记存在。

我尝试使用 Node.bind() 来完成此操作 - http://www.polymer-project.org/docs/polymer/node_bind.html 但它只绑定一种方式。

必须有一个平台实用程序可以进行解析/绑定,但我在任何地方都找不到。

【问题讨论】:

    标签: data-binding polymer 2-way-object-databinding


    【解决方案1】:

    所有 Polymer 元素(对于最新版本)都有这个实用方法:

    /**
     * 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)
    

    所以您应该能够执行以下操作:

    this.injectBoundHTML('<paper-input id="dynamicFoo" inputValue="{{foo}}" label="dynamic foo"></paper-input>', 
      this.$.dynamicFooPlaceHolder);
    

    【讨论】:

    • Polymer 1.0 好像没有这个工具……有没有替代的?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-08-27
    • 2015-01-18
    • 2015-02-15
    • 2017-06-03
    • 2015-08-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多