数组上{{#each}}的奇怪UI行为

时间:2013-09-13 00:10:41

标签: meteor handlebars.js

流星新手在这里。在Todos示例中,我正在尝试使用单独的Tags集合。除了奇怪的UI工件外,它似乎正在工作:如果我单击标签过滤器中的标签,并检查待办事项列表中的最后一项,则也会检查第一项。第一个项目没有更新完成,点击远离标签过滤器,然后返回显示第一个未选中的项目应该是。所以我不确定为什么会这样。

待办事项的代码与Todos示例中的代码相同

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

标签集合过滤器的代码

    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    
    }

我能够收集到的是,如果对数组执行{{#each}},则会创建对整个范围的依赖,而不是数组中的每个单独项,而不是自动创建依赖关系的集合游标对于集合中的每个文档。有没有人遇到这种奇怪的UI行为?我还想知道是否有一种方法可以通过为数组中的每个项目注册依赖项来使数组成为游标或至少像一个游戏一样?

感谢任何见解,谢谢。

1 个答案:

答案 0 :(得分:1)

我已经修改了你的代码以返回光标而不是数组,它可以解决你的问题,但它没有经过测试。

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