jlengrand/polymer-array-bubble-up-example
1
0
Fork 0
mirror of https://github.com/jlengrand/polymer-array-bubble-up-example.git synced 2026-03-10 08:41:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Apply change proposed by SO

Browse Source
This commit is contained in:
Julien Lengrand-Lambert
2017-08-17 08:21:36 +02:00
parent 456e135be4
commit 57b7207fbd
3 changed files with 17 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/another-component/another-component.html
View File

@@ -26,13 +26,7 @@
},
_changeName: function(){
console.log("changing name");
// this.dispatchEvent(new CustomEvent('kick', {detail: {kicked: true}}));
this.fire('kick', {kicked: true});
this.set('element.person', {"name": "bobby"});
this.notifyPath('element');
this.notifyPath('element.person');
this.notifyPath('elements');
this.fire('change-name', {"newPersonName" : "bobby","index":this.index });
}
});
</script>

17
app/components/example-component/example-component.html
View File

@@ -13,7 +13,7 @@
<h2>List of elements</h2>
<template is="dom-repeat" items="{{elements}}" as="item" indexAs="index">
<another-component element="{{item}}" ident$="{{index}}"></another-component>
<another-component element="{{item}}" index={{index}} ident$="{{index}}"></another-component>
</template>
</template>
@@ -29,7 +29,22 @@
value: [{"name": "Main1", "person": fred}, {"name": "Main2", "person": tom}, {"name": "Main3", "person": fred}],
notify: true
}
},
attached: function(){
this.addEventListener('change-name', function (e) {
console.log("fired");
this.elements[e.detail.index].person.name = e.detail.newPersonName;
for(var i =0; i< this.elements.length; i++){
this.notifyPath('elements.'+i+'.person.name');
}
console.log(this.elements);
});
}
});
</script>
</dom-module>

23
app/index.html
View File

@@ -10,28 +10,5 @@
<body>
<example-component></example-component>
<script>
document.querySelector('example-component').addEventListener('kick', function (e) {
console.log("fired");
console.log(e.kicked); // true
this.notifyPath('element');
this.notifyPath('element.person');
this.notifyPath('elements');
});
// var el = document.querySelector('example-component');
// el.addEventListener('kick', function(){
// var normalizedEvent = Polymer.dom(event);
// // logs #myButton
// console.info('rootTarget is:', normalizedEvent.rootTarget);
// // logs the instance of event-targeting that hosts #myButton
// console.info('localTarget is:', normalizedEvent.localTarget);
// // logs [#myButton, document-fragment, event-retargeting,
// // body, html, document, Window]
// console.info('path is:', normalizedEvent.path);
// });
</script>
</body>
</html>