javascript - 为什么当 react 变量改变值时这个函数不运行？

Question

我是 meteor 新手，我正在尝试掌握整个 react 性的事情。

我希望这个函数重新运行并没有具体的原因，事实上，它不重新运行实际上是我的用例所需的行为。我只是想知道为什么会发生这种情况，以便我可以更好地理解这些概念。

如果我将函数添加为模板实例的属性，如下所示:

Template.services.onCreated( function() {
    this.templates = [
        "web_design",
        "painting",
        "gardening"
    ];
    this.current_index = new ReactiveVar(0);

    this.determineSlideDirection = function() {
        console.log(this.current_index.get());
    };
});

然后我更新 react 变量以响应某些事件。

Template.services.events({
    'click .nav-slider .slider-item': function(event, template) {
        var new_selection = event.currentTarget;
        template.current_index.set($(new_selection).index());
    }
});

在调用 set() 调用时，该函数不会重新运行。

但是，如果我有一个使用该变量的帮助程序，它将重新运行。

Template.services.helpers({
    currentTemplate: function() {
        var self = Template.instance();
        return self.templates[self.current_index.get()];
    }
});

这是为什么？

Answer 1

react 性数据源只会导致某些功能自动重新运行。这些功能是:

• Tracker.autorun
• Template.myTemplate.helpers({})
• Blaze.render 和 Blaze.renderWithData

在上面的代码中，您需要使用Tracker.autorun

Template.services.onCreated( function() {
    this.templates = [
        "web_design",
        "painting",
        "gardening"
    ];

    this.current_index = new ReactiveVar(0);

    Tracker.autorun(function(){
        // actually, this might not work because the context of
        // 'this' might be changed when inside of Tracker.
        this.determineSlideDirection = function() {
            console.log(this.current_index.get());
        };
    });
});