Question

因此，当我使用Meteor时，我试图在我的Spacebars模板中保持高效和干净。但我很难理解复选框和选择选项的处理方式。假设我想要一个复选框设置为是否选中，具体取决于我的某个集合中的文档中的标志。我似乎无法做到以下几点：

<input type='checkbox' id='item-{{this.item_id}}' {{#if checked}}checked{{/if}} />

当我尝试这个时，我收到以下错误：

A template tag of type BLOCKOPEN is not allowed here.

如果我尝试以下选项，即使标志为false，它们都会导致复选框被检查：

<input type='checkbox' id='item-{{this.item_id}}' checked='{{#if checked}}true{{/if}}' />
<input type='checkbox' id='item-{{this.item_id}}' checked='{{#if checked}}true{{else}}false{{/if}}' />

我在选择选项中遇到selected同样的问题，所以我最终做了类似下面的事情来解决它，这看起来很冗长且容易出错：

<select id='option-{{this.item_id}}'>
    {{#if option_60}}
        <option value='60' selected>1 hour</option>
    {{else}}
         <option value='60'>1 hour</option>
    {{/if}}

    {{#if option_90}}
         <option value='90' selected>90 mins</option>
    {{else}}
        <option value='90'>90 mins</option>
    {{/if}}

    {{#if option_120}}
         <option value='120' selected>2 hours</option>
    {{else}}
         <option value='120'>2 hours</option>
    {{/if}}
</select>

Answer 1

您可以使用非块助手来放置此类参数：

UI.registerHelper('checkedIf', function(val) {
  return val ? 'checked' : '';
});

<input type="checkbox" {{checkedIf checked}}>

Answer 2

以下是我用来解决此问题的代码示例，这应该非常简单。

JS

Template.myTemplate.helpers({
  checked:function(){
    // assumes that this.checked is the flag in your collection
    return this.checked?"checked":"";
  },
  options:function(){
    // store options in a helper to iterate over in the template
    // could even use http://momentjs.com/docs/#/durations/humanize/ in this case ?
    return [{
      value:60,
      text:"1 hour"
    },{
      value:90,
      text:"90 mins"
    },{
      value:120,
      text:"2 hours"
    }];
  },
  selected:function(value){
    // compare the current option value (this.value) with the parameter
    // the parameter is the value from the collection in this case
    return this.value==value?"selected":"";
  }
});

Template.parent.helpers({
  dataContext:function(){
    // dummy data, should come from a collection in a real application
    return {
      checked:true,
      value:90
    };
  }
});

HTML

<template name="myTemplate">
  <input type="checkbox" {{checked}}>
  <select>
    {{#each options}}
      {{! ../ syntax is used to access the parent data context which is the collection}}
      <option value="{{value}}" {{selected ../value}}>{{text}}</option>
    {{/each}}
  </select>
</template>

<template name="parent">
  {{> myTemplate dataContext}}
</template>

编辑：正如Hubert OG所暗示的那样使用普遍帮助者：

JS

Template.registerHelper("checkedIf",function(value){
  return value?"checked":"";
});

Template.registerHelper("selectedIfEquals",function(left,right){
  return left==right?"selected":"";
});

HTML

<template name="myTemplate">
  <input type="checkbox" {{checkedIf checked}}>
  <select>
    {{#each options}}
      <option value="{{value}}" {{selectedIfEquals value ../value}}>{{text}}</option>
    {{/each}}
  </select>  
</template>

Answer 3

实现此目标的最佳，最有效和最有效的方法是设置全局模板助手，分别用于确定checked和selected值。有关创建全局模板帮助程序的文档，请参阅this documentation。

对于checked，我建议以这种方式实施它：

Template.registerHelper('isChecked', function(someValue) {
    return someValue ? 'checked' : '';
});

对于selected，我建议以这种方式实施它：

Template.registerHelper('isSelected', function(someValue) {
    return someValue ? 'selected' : '';
});

通过实现这两个全局模板帮助程序，您可以在应用程序中的任何模板中使用它们，如下所示：

<template name="someTemplate">
    <input type="checkbox" {{isChecked someValue}}>

    <select>
        {{#each someOptions}}
            <option {{isSelected someValue}}>{{someDisplayValue}}</option>
        {{/each}}
    </select>
</template>

如何在Meteor（使用空格键模板）中为输入控件指示“已选中”或“已选择”状态？

3 个答案: