带有ViewModel包的Meteor不会更新多个子模板

时间:2015-12-31 15:54:48

标签: meteor

我是meteor的新手,并且对正在发生的事情有了基本的了解,但我坚持这个例子(问题已尽可能简化):

我有一个模板和一个子模板:

<template name="test">
    {{#each items}}
        {{> testItem}}
    {{/each}}

    {{#each items}}
    {{> testItem}}
    {{/each}}
</template>

<template name="testItem">
    <div {{ b "click: toggle"}}>{{value}}</div>
</template>

Template.test.viewmodel({
    items: [],
    onCreated: function() {
        this.items().push({ value: 'test' });
    }
})

Template.testItem.viewmodel({
    toggle: function() {
        this.value("changed");
    }
});

这里的事情是我们在viewmodel中有一个项目数组,我们通过子模板多次渲染它。

当我们切换项目时,它只切换单个项目模板,而不是其他表示模板。它表现得像是在复制价值,或正在进行某种范围界定。

我的期望是第二项也会改变,但事实并非如此 - 我在这里错过了什么,或者误解了什么?

编辑 - 其他调查

如果我通过父项更改项目,并通知它已更改,则更改将在整个子模板中传播

      Template.testItem.viewmodel({
    toggle: function () {
        this.parent().items()[0].value = "changed";
        this.parent().items().changed();
    }
});

谢谢!

1 个答案:

答案 0 :(得分:0)

您是对的,当您执行this.value("changed");时,您需要更改testItem视图模型的值,而不是父数组。如果您要修改数组中对象的属性,我强烈建议您使用客户端Mongo集合。它会为你节省很多麻烦。

Items = new Mongo.Collection(null);

Template.test.viewmodel({
  items: function() {
    return Items.find();
  },
  onCreated: function() {
    Items.insert({ _id: "1", value: 'test' });
  }
})

Template.testItem.viewmodel({
  toggle: function() {
    Items.update({ _id: this._id() }, { value: 'changed' });
  }
});
顺便说一句,我很少检查。您将在viewmodelboard.meteor.com

上获得更快的回复