Привязка данных полимера не работает при назначении разметки для innerHTML, которая содержит привязку данных атрибута.

Как проще всего создать привязку данных к атрибутам в Polymer при работе с innerHTML?

Это пример того, что я имею в виду - 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);

Но "dynamicFoo", созданный с помощью innerHTML, никак не связан со свойством foo, хотя разметка для него существует.

Я пытался сделать это с помощью Node.bind() — http://www.polymer-project.org/docs/polymer/node_bind.html, но связывается только одним способом.

Должна быть утилита платформы, которая выполняет разбор/привязку, но я нигде не могу ее найти.


data-binding polymer 2-way-object-databinding
person usermax    schedule 21.08.2014    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Все элементы 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);
person Scott Miles    schedule 21.08.2014
comment
Кажется, в Polymer 1.0 этой утилиты нет... Есть ли альтернатива? - person usermax; 20.06.2015