我正在尝试对聚合物使用单向数据流。因此，我要更新聚合物之外的商店，然后在更新它时触发事件。当我第一次设置数组时，它可以工作。但随后的时间它不起作用。
这是一支笔：http : //codepen.io/tylergraf/pen/EyXZva/
这是代码：
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-icon/iron-icon.html">
<script>
window.theList = [{
stuff: 'stuff'
}];
</script>
<button id="changeOutside">Increment Value</button>
<parent-element></parent-element>
<dom-module id="parent-element">
<template>
<div class="list">
<template is="dom-repeat" items="[[list]]">
<child-element item="[[item]]"></child-element>
</template>
</div>
</template>
<script>
Polymer({
is: 'parent-element',
ready: function(){
document.addEventListener('dispatch', (e)=>{
console.log(e.detail);
// this.list = e.detail;
this.set('list', e.detail);
});
}
});
</script>
</dom-module>
<dom-module id="child-element">
<template>
<ul>
<li>Stuff: [[item.stuff]]</li>
</ul>
</template>
<script>
Polymer({
is: 'child-element',
properties: {
item: {
type: Object,
value: {
stuff: 'stuff',
things: 'things'
}
},
}
});
</script>
</dom-module>
<script>
var changeOutside = document.querySelector('#changeOutside');
var inc = 0;
changeOutside.addEventListener('click', function(){
var newList = window.theList.map(function(li){
li.stuff = inc++;
return li;
});
var event = new CustomEvent('dispatch', {detail: newList});
document.dispatchEvent(event);
})
</script>
这里肯定发生了一些奇怪的事情，以下是一种解决方法，但是我很乐意看到Polymer支持这一点。
您的问题是映射中的返回值是现有对象的修改版本。对象引用本身未更改。因此，尽管从地图创建了一个新的Array，但是Object本身并没有改变。
如果您更改此地图
var newList = window.theList.map(function(li){
li.stuff = inc++;
return li;
});
到以下内容：
var newList = window.theList.map(function(li){
return {
stuff: inc++
};
});
然后，代码将按预期工作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句