Meteor模板不在JQuery回调中更新

时间:2015-09-21 16:30:03

标签: javascript jquery templates meteor

我试图让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>

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

我有一个更新集合的场景,所以我不得不使用Materialize Select

重新构建我的select元素

这是我的渲染函数的样子。自动运行知道Channels是一个被动数据源,并在此数据源发生变化时重新运行自动运行功能。

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

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

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