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类）但我不建议在html属性中使用if语句或句柄，因为spark注释（meteor的模板系统）放入。它们通常是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>

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

2 个答案: