在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类)但我不建议在html属性中使用if语句或把手,因为spark注释(meteor的模板系统)放入.他们是通常html评论,他们在html属性中不能很好地发挥.