2016-03-09 6 views
3

Я пытаюсь получить двухстороннюю привязку данных между элементом-хозяином и шаблоном в Polymer с помощью шаблона. Например, если я пытаюсь держать два поля ввода в синхронизации:Двустороннее связывание данных с Polymer.Templatizer

<html> 
    <body> 
    <my-element> 
     <template > 
     <input type="text" value="{{test::change}}" /> 
     <div>The value of 'test' is: <span>{{test}}</span></div> 
     </template> 
    </my-element> 

    <dom-module id="my-element"> 
     <template> 
     <input type="text" value="{{test::change}}" /> 
      value: 
      <p>{{test}}</p> 
      <div id="items"></div> 
      <content id="template"></content> 
     </template> 
    </dom-module> 

    <script> 

    Polymer({ 
     is: 'my-element', 
     test: { 
     type: String, 
     value: "a" 
     }, 
    behaviors: [ Polymer.Templatizer ], 
    _forwardParentProp: function(prop, value) {debugger}, 
    _forwardParentPath: function(path, value) {debugger}, 
    _forwardInstanceProp: function(inst, prop, value) {debugger}, 
    _forwardInstancePath: function(inst, path, value) {debugger}, 
    ready: function() { 
    this._instanceProps = { 
     test: true 
    }; 
    var templates = Polymer.dom(this.$.template).getDistributedNodes(); 
    template = templates[1]; 
    this.templatize(template); 
    var itemNode = this.stamp({ test: this.test}); 
    Polymer.dom(this.$.items).appendChild(itemNode.root); 
    } 
    }); 

    </script> 
    </body> 
</html> 

В приведенном выше коде, я попал в отладчик в _forwardInstanceProp, но не любой из других. Почему это? Внутри _forwardInstanceProp Я могу получить доступ к элементу my-element и вручную обновить свойство test. Есть лучший способ сделать это? Я также мог бы добавить наблюдателя в свой элемент к свойству test, а затем распространить любые изменения в my-element на шаблон. Есть ли лучший способ сделать это? Я просто пытаюсь понять, что делают все четыре из этих методов и когда/почему они должны использоваться.

ответ

1

Это бьет меня, почему я никогда не могу получить ни _forwardParentPath, ни _forwardParentProp для запуска. Тем не менее, я знаю, когда два друга бежать :)

_forwardInstanceProp работает для прямых свойств модели, переданных stampи_instanceProps инициализируется:

this._instanceProps = { 
    text: true 
}; 

var clone = this.stamp({ 
    text: this.text 
}); 

_forwardInstancePath на других пробегов вручную, когда вы проходите вложенные объекты в stamp:

var clone = this.stamp({ 
    nested: { 
    text: this.text 
    } 
}); 

Смотрите этот бункер для примера: http://jsbin.com/kipato/2/edit?html,js,console,output

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

Смежные вопросы