Связывание данных между экземпляром и хостом полимера Templatizer

Question

Я пытаюсь использовать шаблонный шаблон для создания одного экземпляра шаблона, добавить его в div и получить привязку данных для работы между хостом и этим экземпляром, но мне трудно получить это работать.

Самый простой пример, который я пробовал:

HTML

<dom-module id="test-app"> 
    <paper-input label="host" value="{{test}}"></paper-input> 
    <template id="template"> 
    <paper-input label="instance" value="{{test}}"></paper-input> 
    </template> 
    <div id="placehere"></div> 
</dom-module> 

JS

Polymer({ 
    is: "test-app", 
    behaviors: [Polymer.Templatizer], 
    properties: { 
    test: { 
     type: String, 
     value: 'hello', 
     notify: true, 
    }, 
    }, 

    ready: function() { 
    this.templatize(this.$.template); 
    var clone = this.stamp({test: this.test}); 
    Polymer.dom(this.$.placehere).appendChild(clone.root); 
    }, 
}); 

Идея выше, чтобы создать экземпляр шаблона, поместите его в "placehere" и синхронизировать два входных текстовых поля.

Когда страница загружается, экземпляр создается успешно, а значение в обоих текстовых полях «привет», но изменение любого поля ввода ничего не делает.

Документация на странице полимера кажется немного облегченный: https://www.polymer-project.org/1.0/docs/api/Polymer.Templatizer но упоминает использование _forwardParentProp и _forwardParentPath. Как именно я должен реализовать их в своей ситуации?

Answer 1

Как вы уже выяснили, вам необходимо реализовать некоторые из методов Templatizer. В частности, методы _forwardParentProp и _forwardParentPath.

Но прежде чем я начну, я должен также указать еще одну ошибку в определении пользовательских элементов. В элементе dom-module у вас есть содержимое элемента, определенное без шаблона. Необходимо обернуть все в пределах элемента template. Неподвижная версия пользовательского элемента будет выглядеть так:

<dom-module id="test-app"> 
    <template> 
    <paper-input label="host" value="{{test}}"></paper-input> 
    <template id="template"> 
     <paper-input label="instance" value="{{test}}"></paper-input> 
    </template> 
    <div id="placehere"></div> 
    </template> 
</dom-module> 

Что касается реализации методов Templatizer, сначала нужно хранить штампованной экземпляр. После этого оба метода, которые требуют реализации, являются более или менее простыми однострочными.

Вот полный JavaScript часть пользовательского элемента:

Polymer({ 
    is: "test-app", 
    behaviors: [Polymer.Templatizer], 
    properties: { 
    test: { 
     type: String, 
     value: 'hello', 
     notify: true, 
    }, 
    }, 

    ready: function() { 
    this.templatize(this.$.template); 
    var clone = this.stamp({test: this.test}); 
    this.stamped = clone.root.querySelector('*'); // This line is new 
    Polymer.dom(this.$.placehere).appendChild(clone.root); 
    }, 

    // This method is new 
    _forwardParentProp: function(prop, value) { 
    if (this.stamped) { 
     this.stamped._templateInstance[prop] = value; 
    } 
    }, 

    // This method is new 
    _forwardParentPath: function(path, value) { 
    if (this.stamped) { 
     this.stamped._templateInstance.notifyPath(path, value, true); 
    } 
    }, 
}); 

Вот работает JSBin демо: http://jsbin.com/saketemehi/1/edit?html,js,output