gpt4 book ai didi

javascript - 更新时 meteor 、响应式(Reactive)数组渲染问题

转载 作者:行者123 更新时间:2023-11-28 06:21:41 26 4
gpt4 key购买 nike

我有一个嵌套模板,使用 ReactiveDict 来存储数据,它是一个包含变量(颜色、类型...)和子节点数组的对象。

我在刷新时遇到问题:数组以 react 方式显示,但当我更新数组时,它无法正确呈现。

简而言之(清理代码):

<body>
{{#with data}}
{{>nested}}
{{/with}}
</body>

<template name="nested">
<div>{{color}}<div>
<div class="ui dropdown">
<!-- drop down stuff goes here-->
</div>
{{#if children}}
{{#each children}}
{{>nested scope=this}}
{{/each}}
{{/if}}
</template>

Template.body.helpers({
"data": { color: "blue",
children: [{color: "green", children: [{color: "teal"}]},
{color:"red", children:[{color: "cyan"}],{color: "magenta"}]]}}
})

Template.nested.onCreated(function(){
this.scope = new ReactiveDict();
this.scope.set('scope', this.data.scope);
})
Template.nested.helpers({
"color": function () { Template.instance().scope.get('scope').color;},
"children": function () {
return Template.instance().scope.get('scope').children;
}
})

Template.nested.events({
"click .ui.dropdown > .menu > .item": function(e, t) {
e.preventDefault();
e.stopPropagation();
var data = t.scope.get('scope');
//do processing stuff here...
updatedArray = myFunction();
data['children'] = updatedArray;
t.scope.set('scope', data);
}
})

所以发生的情况是,更新时已经存在的元素不会更新,如果添加了元素,它们就会显示。如果删除了元素,这些元素将被删除,但变量中的数据(此处的颜色)不会更新。

为了使其正常工作,我必须执行以下操作:

Template.nested.events({
"click .ui.dropdown > .menu > .item": function(e, t) {
e.preventDefault();
e.stopPropagation();
var data = t.scope.get('scope');
//do processing stuff here...
updatedArray = myFunction();
delete data.children;
t.scope.set('scope', data);

Meteor.setTimeout(function() {
data['children'] = updatedArray;
t.scope.set('scope', data);
},10);
}
})

这确实有效,但它完全是一种黑客行为,迫使数组变为空,然后在短暂的超时后刷新。

我应该如何以正确的方式做到这一点?PS:我尝试在 ReactiveDict 上使用 allDeps.changed(),并且尝试强制重新渲染,但它位于渲染循环中,因此不会渲染 View 两次。似乎无法理解为什么数组元素没有更新。我知道在使用集合时 MiniMongo 检查对象的 _id 以查看它们是否更改,但我的对象中没有 _id 。我也尝试添加一个,但运气不佳

最佳答案

好吧,我想我在弄清楚之前就问过......'_id' 的事情成功了。我之前尝试过,但实际上我对相同的元素使用相同的 _id,因此它们似乎没有改变(废话!)

因此,通过在生成的对象中添加 { "_id": Meteor.uuid() } ,更新工作正常。

关于javascript - 更新时 meteor 、响应式(Reactive)数组渲染问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35472921/

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