 Data binding between two Polymer elements using polymer 1.0
By : Hez
Date : March 29 2020, 07:55 AM
wish of those help If you include in the of test-element2 you can avoid using event listeners or observers. In this way test-element2 handles the data binding between the input and for you.
Below is a live working example that maintains the obj property as you have set it up in your elements. code :
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="test-element">
<template>
<div>Hello <span>[[obj.name]]</span>
</div>
</template>
<script>
TestElement = Polymer({
is: "test-element",
properties: {
"obj": {
type: Object,
notify: true
}
}
});
</script>
</dom-module>
<dom-module id="test-element2">
<template>
<input value="{{obj.name::input}}" />
<test-element obj="[[obj]]"></test-element>
</template>
<script>
Polymer({
is: "test-element2",
properties: {
"obj": {
type: Object,
notify: true,
value: {
"name": "Charlie"
}
}
}
});
</script>
</dom-module>
<test-element2></test-element2>
button {
display: block;
}
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="test-element">
<template>
<div>Hello <span>[[obj.name]]</span>
</div>
</template>
<script>
TestElement = Polymer({
is: "test-element",
properties: {
obj: {
type: Object,
notify: true
}
}
});
</script>
</dom-module>
<dom-module id="test-element2">
<template>
<input value="{{obj.name::input}}" />
</template>
<script>
Polymer({
is: "test-element2",
properties: {
obj: {
type: Object,
notify: true,
value: {
"name": "Charlie"
}
}
},
observers: ["objNameChanged(obj.name)"],
objNameChanged: function(newValue) {
Polymer.dom(document).querySelectorAll("test-element").forEach(function(element) {
element.notifyPath("obj.name", newValue);
});
Polymer.dom(this.root).querySelectorAll("test-element").forEach(function(element) {
element.notifyPath("obj.name", newValue);
});
}
});
</script>
</dom-module>
<test-element2></test-element2>
<button>Add test-element to <em>test-element2</em>
</button>
<button>Add test-element to <em>body</em>
</button>
<script>
var testElement2 = document.querySelector("test-element2");
var createTestElement = function(insertPoint) {
var testElement = new TestElement();
testElement.notifyPath("obj.name", testElement2.obj.name);
insertPoint.appendChild(testElement);
};
document.querySelector("button:nth-of-type(2)").addEventListener("click", function() {
createTestElement(Polymer.dom(document).querySelector("body"));
});
document.querySelector("button").addEventListener("click", function() {
createTestElement(Polymer.dom(testElement2.root));
});
</script>
|
 Polymer inter-component data binding?
By : xinbo111
Date : March 29 2020, 07:55 AM
will help you Create a property that represents the status in your login component and set notify: true. Use data-binding in your login component and any other components that use that status. code :
<login-component status="{{status}}"></login-component>
<other-component login="{{status}}"></other-component>
<template is="dom-bind">
<login-component status="{{status}}"></login-component>
<other-component login="{{status}}"></other-component>
</template>
|
Polymer 2.0 Data Binding - from html property to Polymer class
By : feysht
Date : March 29 2020, 07:55 AM
wish of those help that should just work using polymer properties with a boolean type and reflectToAttribute. code :
<html>
<head>
<base href="http://polygit.org/polymer+v2.0.0-rc.7/webcomponentsjs+v1.0.0-rc.11/shadydom+webcomponents+:master/shadycss+webcomponents+:master/components/">
<link href="polymer/polymer.html" rel="import">
<script src="webcomponentsjs/webcomponents-loader.js"> </script>
</head>
<body>
<my-el disabled>
<h3>Disabled Element</h3>
</my-el>
<my-el>
<h3>Enabled Element</h3>
</my-el>
<dom-module id="my-el">
<template>
<style>
.disabledInfo { display: none; }
:host([disabled]) .disabledInfo { display: block; }
:host([disabled]) .enabledInfo { display: none; }
</style>
<slot></slot>
<div class="disabledInfo">I am disabled</div>
<div class="enabledInfo">I am enabled</div>
<br /><br />
</template>
<script>
class MyEl extends Polymer.Element {
static get properties() {
return {
disabled: {
type: Boolean,
reflectToAttribute: true,
value: false
}
};
}
static get is() { return 'my-el'; }
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
</body>
</html>
|
Polymer data binding doesn't work when assigning markup to innerHTML that contains attribute data binding
By : mstt
Date : March 29 2020, 07:55 AM
may help you . What is the simplest way to create data bindings to attributes, in Polymer, when working with innerHTML? , All Polymer elements (for recent releases) have this utility method:
|
 How to revert form value to model value in a component that's using one-way data binding?
By : Han Wang
Date : March 29 2020, 07:55 AM
|
code :
Related Posts :