Polymer, Bindung an Array-Elemente funktioniert nicht
In diesem Beispiel(Zupfen Es besteht eine Bindung zwischen der Eigenschaft und dem Array-Element.
firstName sollte sich beim Klicken von "John" in "Test" ändern, dies geschieht jedoch nicht.
Wie wird die Eigenschaft bei der Artikelaktualisierung geändert?
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<!--
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-input/paper-input.html" />
-->
<dom-module id="first-el">
<template>
<br> firstName should change on click:<br><br>
firstName: <span>{{employees.employees.0.firstName}}</span>
<br>
<br>
<button on-tap="tap_change_firstName_1">change firstName to: Test</button>
</template>
<script>
(function() {
'use strict';
Polymer({
is: "first-el",
properties: {
employees: {
type: Object,
notify: true,
},
},
//domReady:
attached: function() {
this.async(function() {
console.log('first: domReady:');
this.employees = {
"employees": [{
"firstName": "John",
"lastName": "Doe"
}]
};
});
},
tap_change_firstName_1: function() {
console.log('First: tap_change_firstName_1');
//update array item property
this.set('employees.employees.0.firstName', 'Test');
console.log('New value:');
console.log(this.employees.employees[0].firstName);
//here the value is cnahged but that does not reflect in the DOM
},
});
})();
</script>
</dom-module>
<!-- use the element -->
<first-el></first-el>
Aktualisieren
array-selector (einfaches Beispiel) Element kann auch für diese Aufgabe verwendet werden.