Scope of two-way data binding problem
HTML
<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<polymer-element name="tk-binding-to-elements" attributes="name">
<template>
<p>This is tk-element but
<strong>{{name}}</strong> lets me borrow it.
</p>
<label for="nameInput">Name:</label>
<input id="nameInput" value="{{name}}" placeholder="Your name here..."/>
</template>
<script>
Polymer('tk-binding-to-elements', {
name: "Daniel",
nameChanged: function() {
if (this.name) {
// ensure capitalization
this.name = this.name[0].toUpperCase() + this.name.slice(1);
}
}
});
</script>
</polymer-element>
<template id="tmpl" bind>
<tk-binding-to-elements name="{{name}}"></tk-binding-to-elements>
<p>Outter world thinks it was: {{name}},<br/>
and they could blame <input value="{{name}}"/>
</p>
</template>
CSS
body {
font-family: Helvetica, Arial, sans-serif;
}
JavaScript
addEventListener('polymer-ready', function() {
document.querySelector('#tmpl').model = {
name: "Tomek"
};
});