4

因此，当我使用 Meteor 时，我试图在我的空格键模板中保持高效和干净。但是我对处理复选框和选择选项的方式感到困惑。假设我想根据我的一个集合中的文档中的标志将复选框设置为选中或不选中。我似乎无法执行以下操作：

<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>
4

3 回答 3

7

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

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

<input type="checkbox" {{checkedIf checked}}>
于 2014-09-24T20:14:02.620 回答
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>
于 2014-09-24T20:18:11.173 回答
2

实现此目的的最佳、最有效和最有效的方法是设置全局模板帮助器，每个帮助器用于确定checked和selected值。有关创建全局模板助手的文档，请参阅此文档。

对于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>
于 2015-08-13T02:09:34.767 回答