gpt4 book ai didi

javascript - dom-repeat 不反射(reflect)数据变化

转载 作者:行者123 更新时间:2023-11-30 20:53:21 27 4
gpt4 key购买 nike

我尝试了计算属性和各种其他技术,但 View 并未反射(reflect)我的模型。模型会更新,但 View 不会。

查看

<div class="selection">
<ul>
<template is="dom-repeat" items="{{state.selection}}">
<li>
<a data-selection$="{{item.id}}" on-click="selection">{{item.name}}</a>
</li>
</template>
</ul>
</div>

<div class="selection sub-selection">
<template is="dom-repeat" items="{{state.subSelection}}">
<ul id$="subselection-{{item.id}}" class$="[[item.active]]">
<template is="dom-repeat" items="{{item.selections}}">
<li>
<a data-selection="{{item.id}}" on-click="selection">{{item.name}}</a>
</li>
</template>
</ul>
</template>
</div>

型号

constructor(){
super()
this.state = {
selection: [
{
id: 1,
name: 'Selection One'
},
{
id: 2,
name: 'Selection Two'
}
],

subSelection: [
{
id: 1,
name: 'Sub Selection One',
active: 'active'
},
{
id: 2,
name: 'Sub Selection Two',
active: ''
}
]
}

selection(event){
event.preventDefault();
let self = this;
let id = parseInt(event.currentTarget.getAttribute('data-selection'));

self.state.subSelection.forEach(function(key, index){
if(key.id === id){
key.active = 'active'
}else{
key.active = ''
}
});
}

目标是单击“selection”中的项目获取其 id 值并将其与“subSelection”中具有相同 id 的项目匹配,然后将事件值更改为“active”或“”。

除了 View 更新外,一切顺利。

最佳答案

所以我最终通过 this.set(property, value) 解决了它。 polymer 在如何实现这一点方面也非常特别。但以下内容适用于我的更新功能:

selection(event){
event.preventDefault();
let self = this;
let id = parseInt(event.currentTarget.getAttribute('data-selection'));
self.state.subSelection.forEach(function(key, index){
if(key.id === id){
self.set("state.subSelection."+index+".active", 'active');
}else{
self.set("state.subSelection."+index+".active", '');
}
);
}

关于javascript - dom-repeat 不反射(reflect)数据变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47932625/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com