假设我有一个用户可以按下的星号/收藏按钮。如果他们按下它,按钮应该切换状态或看起来不同,并且该状态应该是持久的(如果我刷新页面,它会保持相同的状态)和反应性(假设同一个用户打开了两个浏览器实例并且他们按下了按钮,他们将在另一个浏览器windw中看到新更改的状态)。
- 我是否应该在我的车把模板中使用 if 语句,在两个不同的 span/div 之间选择不同的按钮?
- 将一个类添加到该元素并为该类的按钮具有不同的 css 并以某种方式将添加的类推回服务器和其他客户端会更好吗?
- 其他推荐路线?
假设我有一个用户可以按下的星号/收藏按钮。如果他们按下它,按钮应该切换状态或看起来不同,并且该状态应该是持久的(如果我刷新页面,它会保持相同的状态)和反应性(假设同一个用户打开了两个浏览器实例并且他们按下了按钮,他们将在另一个浏览器windw中看到新更改的状态)。
要使其持久化,您需要将其设置在集合中以切换状态
您的点击处理程序中的 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>
当然以上只是一个示例,您可以使用 each 块助手或不同的模板助手来返回您的数据。但希望你能明白。
我建议对两个不同的 div 使用 if 语句(您甚至可以只使用 css 类),但我不建议在 html 属性中使用 if 语句或句柄,因为会插入 spark 注释(流星的模板系统)。它们是通常是 html 注释,它们在 html 属性中表现不佳。
您可以使用 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>