{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 孤傲高冷的网名 的问题《Polymer: Updating Templatized template when parent》','https://www.manongdao.com/q-935331.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Following this question, I'm trying to get full two-way binding between parent and template when using Polymer.Templatizer. I'm not sure what the problem is _forwardParentProp and _forwardParentPath are never called when a property changes on parent. I think it's the reason why my templates don't update.
Here's my code (also available here). As you can see dom-if binds both ways and the two templates (one created dynamically other declared inside custom element) only update parent but aren't themselves updated.
Polymer({
is: "my-app",
behaviors: [Polymer.Templatizer],
properties: {
global: {
value: {
text: 'i'
},
notify: true
}
},
ready: function() {
this.count = 0;
// this ensures that global.text is updated when text changes
this._instanceProps = {
text: true
};
this.addHeadline(this.$.template);
this.addHeadline(this._dynamicTemplate());
},
addHeadline: function(template) {
this.templatize(template);
var clone = this.stamp({
text: this.global
});
// Append to my-app
Polymer.dom(this.root).appendChild(clone.root);
},
_dynamicTemplate: function() {
var template = document.createElement("template");
var templateRoot = document.createElement('div');
templateRoot.innerHTML = '<h1>{{text.text}}</h1><input type="text" value="{{text.text::input}}" />';
// you cannot just set innerHTML in <template>
template.content.appendChild(templateRoot);
return template;
},
_forwardInstanceProp: function(inst, p, val) {
console.log('_forwardInstanceProp');
},
_forwardInstancePath: function(inst, p, val) {
// notify parent's correct path when text.text changes
this.set(p.replace(/^text/, 'global'), val);
console.log('_forwardInstancePath');
},
_forwardParentProp: function(prop, value) {
console.log('_forwardParentProp');
},
_forwardParentPath: function(prop, value) {
console.log('_forwardParentPath');
}
});<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link rel="import" href="paper-input/paper-input.html"/>
</head>
<body>
<dom-module id="my-app">
<template>
<paper-input label="global.text" value="{{global.text}}"></paper-input>
<p>global.text: <{{global.text}}></p>
<template id="template">
<h1>{{text.text}}</h1><input type="text" value="{{text.text::input}}" />
</template>
<template if="true" is="dom-if">
<div>
dom-if:
<input type="text" value="{{global.text::input}}" />
</div>
</template>
</template>
</dom-module>
<my-app></my-app>
</body>
</html>