Meteor, reactive array rendering issues on update

試著忘記壹切 提交于 2021-02-10 23:36:34

问题


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);
}
})

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.

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


回答1:


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!)

So by adding a { "_id": Meteor.uuid() } in my generated objects, the update works fine.



来源:https://stackoverflow.com/questions/35472921/meteor-reactive-array-rendering-issues-on-update

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!