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>