在meteor.js中实现反应式按钮的最佳方法？

Question

假设我有一个可由用户按下的星标/收藏夹按钮。 如果他们按下按钮，则按钮应该切换状态或看起来不同，并且该状态应该既是持久性的（如果我刷新页面，其将保留相同的状态）又是反应性的（假设同一用户打开了两个浏览器实例，并且他们按下了按钮，会在其他浏览器窗口中看到新更改的状态）。

• 我是否应该在车把模板中使用if语句，该语句在两个具有不同按钮的跨度/ div之间进行选择？
• 将一个类添加到该元素，并为该类的按钮添加不同的CSS，然后以某种方式将添加的类推回到服务器和其他客户端，会更好吗？
• 其他推荐路线？

Answer 1

为了使其持久，您需要将其设置在集合中以切换状态

您的点击处理程序中的js：

Template.yourtemplate.events({
    'click #yourbutton':function(event,template) {
        var state = MyCollection.findOne({}).state
        MyCollection.update({}, {$set:{state:!state}});
    }
});

Template.yourtemplate.helpers({
    item:function() {
        return MyCollection.findOne({});
    }
});

然后你的HTML：

<template name="yourtemplate">
    {{#if yourtemplate.state}}
        <div id="yourbutton">STATE 1</div>
    {{else}}
        <div id="yourbutton">STATE 0</div>
    {{/if}}
</template>

当然，以上只是一个示例，您可以使用每个块帮助器或其他模板帮助器来返回数据。 但希望您能明白。

我建议对两个不同的div使用if语句（您甚至可以只使用css类），但是由于放置了spark注释（流星的模板系统），因此我不建议在html属性中使用if语句或把手。通常是html注释，它们在html属性中的作用不太好。

Answer 2

您可以使用ReactiveVar：

Template.yourtemplate.onCreated(function() {
    this.buttonState = new ReactiveVar();
    this.buttonState.set(true);
});

Template.yourtemplate.events({
    'click #yourbutton'(event,tmpl) {
        var state = tmpl.buttonState.get();
        tmpl.buttonState.set(!state);
    }
});

Template.yourtemplate.helpers({
    button_state() {
        const tmpl = Template.instance();
        return tmpl.expandedState.get();
    }
});

在HTML中：

<template name="yourtemplate">
    {{#if button_state}}
        <div id="yourbutton">STATE 1</div>
    {{else}}
        <div id="yourbutton">STATE 0</div>
    {{/if}}
</template>