流星，更新时的反应性数组渲染问题

本文介绍了流星，更新时的反应性数组渲染问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个嵌套模板，使用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

流星

流星，更新时的反应性数组渲染问题

问题描述

推荐答案