CODEWITHSUNDEEP
meteorhandlebars.js
landland
landland

Reputation: 2147

Strange UI behavior for {{#each}} on an array

Meteor newbie here. Working off of the Todos example, I am trying to use a separate Tags collection. It seems to be working except for a strange UI artifact: If I click a tag in the tag filter, and check off the last item in the todo list, the first item gets checked as well. The first item does not get updated to done, and clicking away from the tag filter and then back shows the first item unchecked as it should be. So I am not sure why that is happening.

The code for the todos is the same as in the Todos example

    {{#each todos}}
      {{> todo_item}}
    {{/each}}

And the code for the tags collection filter

    var todos = [];
    if (!currentTaskId)
      return {};

    var tag_filter = Session.get('tag_filter');
    if (tag_filter){
     var tags = Tags.find({taskId: currentTaskId, name: tag_filter});
     tags.forEach(function(tag){
       var todo = Todos.findOne(tag.todoId);
       todos.push(todo);
     });
     return todos; // this is an array rather than a collection and causes a strange artifact bug when checking bottom todo as done    
    }

What I have been able to gather is that if you do {{#each}} on an array you create a dependency on the entire scope rather than each individual item in the array, versus a collection cursor that automagically creates a dependency for each document in the collection. Has anybody run into this odd UI behavior? I'd also like to know if there is a way to either make the array into a cursor or at least act like one by registering a dependency for each item in the array?

Appreciate any insights, thank you.

Upvotes: 0

Views: 129

Answers (1)

saimeunt
saimeunt

Reputation: 22696

I've revamped your code to return a cursor instead of an array, it may solve your problem but it's untested.

var tagFilter=Session.get("tag_filter");
if(!currentTaskId || !tagFilter){
    return null;
}
// find tags and fetch them in an array
var tags=Tags.find({
    taskId:currentTaskId,
    name:tagFilter
}).fetch();
// build an array of Todos ids by extracting the todoId property from tags
// see underscore docs
var todosIds=_.pluck(tags,"todoId");
// return todos whose id is contained in the array
return Todos.find({
    _id:{
        $in:todosIds
    }
});

Upvotes: 1

Related Questions