在选择框更改时使用新 id 重新初始化模板

Question

我在模板 A 中有一个选择框，用于选择“名称和 ID”项。

我还有一个“项目”模板，它需要一个 ID 作为参数来从其数据库中加载其数据。我正在为 id 使用会话变量，并使用 return Session.get 将 id 传递给“item”模板。这仅适用于负载。当会话变量更改时，“项目”模板不会更新。如何让“item”模板重新初始化

一些代码：

 Template.selectBox.helpers({
    selectList: function () {
        return Templates.find({}, {fields: {'_id': 1, 'name': 1}});
    },
    selectedId: function() {
        return Session.get("selectedId");
    }
});

Template.selectBox.events({
    'change #item-chooser': function (event) {
        var selectedId = $(event.currentTarget).find(":selected").val();
        if (typeof(selectedId) === 'undefined'
            || selectedId === "new") {
            Session.set("selectedId", "new");
        }
        else {
            Session.set("selectedId", selectedId);
        }
    }
});

items 模板被调用

        {{> item selectedId}}

Template.item.onCreated(function() {
    var selectedId = this.data.selectedId;
    this.selectedItem = new ReactiveVar;
    if (typeof(selectedId) === 'undefined'
        || selectedId === "new") {
        this.selectedItem.set(emptyItem);
    }
    else {
        var selectedItemData = Templates.findOne({_id: selectedId});
        this.selectedItem.set(selectedItemData );
    }
});

Answer 1

请务必注意，Template.onCreated 方法不是响应式的，因此如果您有响应式变量，则此方法不会在响应式数据源发生更改时自动重新运行，这与 Template.helpers 不同

解决问题的最简单方法是使用autorun

Template.item.onCreated(function(){
    var self = this;
    self.autorun(function(){
        // some code that has a reactive data source (e.g. Session Var, Collection, or Reactive Var
        // NOTE: you can access template instance data using self.data
    });
});

但是，根据您的描述，我认为使用Template.helpers 可以更好地处理您的问题

Template.item.helpers({
    selectedItem: function(){ 
        return Templates.findOne({_id: Session.get("selectedId")});
    }
});