在模板中处理开关盒的最佳方法是什么(例如:具有 4 种可能状态的按钮)?将 html 拉到 helper 中似乎是错误的,但将逻辑放入模板中感觉同样糟糕......
编辑:
如您所见,将 html 放在帮助程序中远非理想,但更改类、标记名、属性和内容会使模板完全不可读。
Template.nextMeetup.helpers({
rsvpButton: function(rsvp) {
var button;
switch(rsvp){
case 'yes':
button = '<a ' + this.event_url + 'class="rsvp btn btn-success pull-right" title="visit event page" target="_blank"><i class="icon-check"></i> I\'m Attending</a>';
break;
case 'maybe':
button = '<a ' + this.event_url + 'class="rsvp btn btn-warning pull-right" title="visit event page" target="_blank"><i class="icon-warning-sign"></i> I might go</a>';
break;
case 'no':
button = '<a ' + this.event_url + 'class="rsvp btn btn-danger pull-right" title="visit event page" target="_blank"><i class="icon-remove"></i> I\'m not going</a>';
break;
case 'none':
button = '<a ' + this.event_url + 'class="rsvp btn btn-inverse pull-right" title="visit event page" target="_blank"><i class="icon-spinner"></i> I havn\'t decided</a>';
break;
default:
button = '<button class="rsvp signIn btn btn-disabled pull-right">Sign in to RSVP</button>';
}
return new Handlebars.SafeString(button);
}
});
最佳答案
不确定您要输出什么,但可能会涉及评估相等性的助手。把它放在你项目的一个客户端加载的 JavaScript 文件中:
Template.registerHelper("equals", function (a, b) {
return (a == b);
});
然后你可以使用
if
创建类似于 switch-case 结构的东西。 block 和您的新 equals
helper 。例如,如果您将按钮的状态存储在名为 btnState
的变量中。可能的值为1
, 2
或 3
:<button class="{{#if equals btnState 1}}btn-active{{/if}}
{{#if equals btnState 2}}btn-inactive{{/if}}
{{#if equals btnState 3}}btn-disabled
{{else}}btn-default{{/if}}">
如果你想要
switch
- case
的能力在达到真值和/或最后的默认情况后短路进一步测试,这样做的方法是使用一组丑陋的嵌套 if
- else
block :<button class="{{#if equals btnState 1}}
btn-active
{{else}}
{{#if equals btnState 2}}
btn-inactive
{{else}}
{{#if equals btnState 3}}
btn-disabled
{{else}}
btn-default
{{/if}}
{{/if}}
{{/if}}">
这个例子非常简单;我假设您将其用作大型模板的控制结构,而不是像
btn-default
这样的结构。你有几十行 HTML。如果您确实将它用于 CSS 类名之类的短文本片段,则可以创建一个帮助器,将一组案例映射到一组要返回的字符串。例如(CoffeeScript):
Template.registerHelper "switch", (input, cases, output, def) ->
# input is the variable we're comparing, i.e. switch(input)
# cases is an EJSON-stringified array, i.e. case "foo", case "bar"
# output is an EJSON-stringified array of strings to return for each case
# def (default) is a string to return if none of the cases are met
# Validate input, convert EJSON strings into arrays:
unless input? and _.isString(cases) and _.isString(output)
return ""
cases = EJSON.parse cases
output = EJSON.parse output
unless _.isArray(cases) and _.isArray(output) and
cases.length is output.length
return ""
# Evaluate each case, returning as soon as the first case is true:
for value, index in cases
return output[index] if input is value
# If we've made it this far, none of the cases were met; return def (default):
if def? and _.isString(def) then return def else return ""
并使用它:
{{switch btnState "[1,2,3]"
"[\"btn-active\",\"btn-inactive\",\"btn-disabled\"]" "btn-default"}}
Handlebars 不允许将数组或对象传递给帮助程序,因此 JSON 字符串作为参数传递然后被解析的扭曲。
关于templates - 如何处理 Meteor 模板中的 switch case,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17644129/