下划线模板:无法切换工作

时间:2013-04-11 14:21:43

标签: underscore.js underscore.js-templating

我无法在我的下划线模板中使用简单的switch语句。它使用名为UserType的变量的值,我通过<%= UserType%>显示它来检查存在。

代码即将出现:

<% switch(UserType) { %>
    <% case 13: %>
        <button id="schoolButton" value="schools" class="gridChooser k-textbox">Schools</button> 
    <% case 12: %>
        <button id="teacherButton" value="teachers" class="gridChooser k-textbox">Teacher</button> 
    <% case 8: %>
        <button id="classButton" value="classes" class="gridChooser k-textbox">Classes</button> 
        <button id="testButton" value="tests" class="gridChooser k-textbox">Test</button> 
<% } %>

非常感谢任何帮助 - 谢谢。

2 个答案:

答案 0 :(得分:22)

问题是,在将模板转换为JavaScript时,Underscore会添加分号终止符。所以,这样一个简单的switch

<% switch(x) { %>
<% case 11: %>
    <button>
<% } %>

变成看起来像这样的JavaScript:

switch(x) { ;
case 11: ;
    // something to output '<button>' goes here
} ;

但JavaScript switch需要包含case语句,而空语句(即;中的switch(x) { ;)不符合条件。

我无法想到解决这个问题的任何理智,所以我只需切换到if并继续讨论更多有趣的问题:

<% if(UserType === 13) { %>
    <button id="schoolButton" value="schools" class="gridChooser k-textbox">Schools</button> 
<% } else if(UserType === 12) { %>
    <button id="teacherButton" value="teachers" class="gridChooser k-textbox">Teacher</button> 
<% } else if(UserType === 8) { %>
    <button id="classButton" value="classes" class="gridChooser k-textbox">Classes</button> 
    <button id="testButton" value="tests" class="gridChooser k-textbox">Test</button> 
<% } %>

您也可以将其内部翻转并使用print

<% switch(UserType) {
   case 13:
       print('<button id="schoolButton" ...');
   ...
} %>

但这有点难看(恕我直言)。有关详细信息,请参阅_.template documentation


请注意,这个分号技巧也是你的if必须在Underscore模板中包含大括号的原因,即使JavaScript不需要它们也是如此。所以这不起作用:

<% if(pancakes) %>
    <%= pancakes %>

但这会:

<% if(pancakes) { %>
    <%= pancakes %>
<% } %>

这同样适用于循环。

答案 1 :(得分:12)

你可以这样做:

<% switch(UserType) { case 13: %>
  <button id="schoolButton" value="schools" class="gridChooser k-textbox">Schools</button> 
  <% break; case 12: %>
  <button id="teacherButton" value="teachers" class="gridChooser k-textbox">Teacher</button> 
  <% break; case 8: %>
  <button id="classButton" value="classes" class="gridChooser k-textbox">Classes</button> 
  <button id="testButton" value="tests" class="gridChooser k-textbox">Test</button> 
<% break; } %>

这不是一个“舒适”的解决方案,但都没有错。只是工作。