【问题标题】：Meteor template not updating in JQuery callback流星模板未在 JQuery 回调中更新
【发布时间】：2015-09-21 16:30:02
【问题描述】：

我正在尝试让 div 淡出，然后更改模板中使用的会话变量。回调函数中会话变量已成功更改，但模板未响应更新。

以下不会被动更新模板。（这些是触发器）

$(event.target.parentNode).find(subclass)
                          .fadeOut("slow", function() {
    Session.set(this.valueOf() + "_show_exercise_fields", set_show_exercise_fields);

以下确实反应性地更新模板。

Session.set(this.valueOf() + "_show_exercise_fields", set_show_exercise_fields);
$(event.target.parentNode).find(subclass)
                          .fadeOut("slow", function() {
    // do nothing
});

有没有办法强制模板重新渲染或更好的方法来做我想做的事情。谢谢

编辑 1

下面是整个函数

Template.exercise.events({
'click .exercise-name': function(event) {
    var subclass                 = ".exercise-fields-container";
    var set_show_exercise_fields = false;

    if (!Session.get(this.valueOf() + "_show_exercise_fields")) {
        var subclass                 = ".exercise-options-container";
        var set_show_exercise_fields = true;
    }

    // find the subclass (either the fields container or the options
    // container) and fade out
    $(event.target.parentNode).find(subclass)
                              .fadeOut("slow", function() {
        Session.set(this.valueOf() + "_show_exercise_fields", set_show_exercise_fields);
    });
}
});

Template.exercise.helpers({
    show_fields: function() {
        Session.setDefault(this.valueOf() + "_show_exercise_fields", true);
        return Session.get(this.valueOf() + "_show_exercise_fields");
    }
});

下面是模板

<template name="exercise">
    <div class="exercise-name">
        {{this.name}}
    </div>

    {{#if show_fields}}
        Fields
    {{else}}
        Options
    {{/if}}
</template>

【问题讨论】：

我不明白为什么您的第二个 sn-p 会被动更新。目前尚不清楚触发它的反应数据源是什么。你能扩展/解释一下吗？还是您正在展示的触发器（而不是反应）？
响应式数据源是会话变量this.valueOf() + "_show_exercise_fields"。我展示的是触发器，抱歉不够清楚。
这是一个非常奇怪的模式。你想让你的模板对什么做出反应？显然，您正在明确处理 click 事件。您是否试图对 Session 变量的其他地方的更改做出反应？如果是这样，为什么不让您的点击事件简单地更新 Session 变量并让tracker.autorun() 基于 Session 变量进行淡出？
另外，您的 setDefault 不应该在帮助程序中。我理解反应性的方式是整个封装函数将重新运行，即你的 setDefault 应该每次都运行。这可能不是你想要的。
@ChristianFritz setDefault 如果过去已设置，则不会运行。这不会影响反应性，并且之前已经看到过这种做法。 docs.meteor.com/#/full/session_set_default

标签： javascript jquery templates meteor

【解决方案1】：

事件处理程序不是反应式上下文。您可以使用 Tracker.autorun() 创建响应式上下文。

如果您在传递给自动运行的函数中使用会话变量，则只要会话变量更改，整个函数就会重新运行。在这种情况下，您可以根据需要淡入或淡出。

【讨论】：

【解决方案2】：

我遇到了一个正在更新集合的场景，因此我不得不使用 Materialize Select 重新构建我的选择元素

这是我的渲染函数的样子。 autorun 知道 Channels 是一个响应式数据源，并在该数据源发生变化时重新运行 autorun 函数。

Channels = new Mongo.Collection("channels");

Template.channelSelectController.onRendered(function(){
    var self = this;

    this.autorun(function(){
        var count = Channels.find().count();
        self.$('select').material_select();
    });
});

【讨论】：