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

Question

我在模板 A 中有一个选择框，它选择了一个项目 "name and id"。

我还有一个 "item" 模板，它需要一个 ID 作为参数来从数据库加载数据。我正在为 id 使用会话变量，并使用 return Session.get 将 id 传递给 "item" 模板。这仅适用于负载。当会话变量更改时，"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);
        }
    }
});

使用

调用项目模板

        {{> 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 method is not reactive so if you have reactive variables, this method does not automatically re-run when a reactive data source changes unlike 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")});
    }
});

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

Re-initialize template with new id on selectbox change

meteor

meteor-blaze