流星，更新时的反应性数组渲染问题 [英] Meteor, reactive array rendering issues on update
问题描述
我有一个嵌套模板，使用ReactiveDict存储数据，该数据是一个包含变量(颜色，类型...)和子节点数组的对象.
I have a nested template, using a ReactiveDict to store the data, which is an object that includes variables (color, type...) and an array of children nodes.
我在刷新时遇到问题:该数组以被动方式显示，但是当我更新该数组时，它无法正确呈现.
I'm having an issue on refresh: the array displays reactively, but when I update the array, it does not properly render.
简而言之(清理代码):
in short (cleaned up code):
<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);
}
})
因此，正在发生的事情是，在更新时，alreayd出现的元素不会更新，并且如果添加了元素，则它们会显示出来.如果删除了某些元素，则这些元素将被删除，但变量(此处为颜色)中的数据不会更新.
So what's happening is that on update the elements alreayd present do not update, and if there are elements added they show up. if there are elements removed, they elements will be removed but the data in the variables (color here) does not get updated.
要使其工作到现在，我必须执行以下操作:
To make it work so far, I had to do the following:
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);
}
})
那行得通，但这是一个完全黑客手段，将阵列强制为空，然后在短暂的超时后刷新.
That works but it's a total hack forcing the array to nothing and then refreshing after a short timeout.
我应该如何正确执行此操作?PS:我尝试在 ReactiveDict 上使用 allDeps.changed()，并且尝试强制进行重新渲染，但它位于渲染循环中，因此不会渲染视图两次.似乎无法理解为什么数组元素未更新.我知道使用集合时，MiniMongo会检查对象的_id以查看它们是否更改，但是我的对象中没有_id.我还尝试添加一个，但是运气不佳
How am I supposed to do this the proper way?
PS: I tried using allDeps.changed() on the ReactiveDict, and i tried forcing a re-render but it's in the render loop so it won't render the view twice.
Can't seem to understand why the array elements are not updated. I know when using collections MiniMongo checks for _id's of the objects to see if they changed or not, but there are no _id in my objects. I also tried to add one but without much luck
推荐答案
好吧，我想我是在弄清楚之前问过的...'_id'事情就解决了.我之前曾尝试过，但实际上我对相同的元素使用了相同的_id，因此它们似乎没有变化((！)
well I guess I asked just before figuring it out... the '_id' thing did the trick. I had tried before but I was actually using the same _id for the same elements so they did not appear to change (duh!)
因此，通过在生成的对象中添加 {"_id":Meteor.uuid()} ，更新工作正常.
So by adding a { "_id": Meteor.uuid() } in my generated objects, the update works fine.
这篇关于流星，更新时的反应性数组渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
