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

Posted 2023-03-08

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

【英文标题】：How do I indicate 'checked' or 'selected' state for input controls in Meteor (with spacebars templates)?

【发布时间】：2014-11-19 11:00:35

【问题描述】：

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

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

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

A template tag of type BLOCKOPEN is not allowed here.

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

<input type='checkbox' id='item-this.item_id' checked='#if checkedtrue/if' />
<input type='checkbox' id='item-this.item_id' checked='#if checkedtrueelsefalse/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>

【问题讨论】：

您是否只尝试了一个助手而没有#if 声明？ checked=isChecked c=this.flag 我不确定您是否可以再在标签内使用 open 语句。 -未经测试的编辑：检查了我的一个实现，这就是我的做法（Meteor 0.8.0+）。是的，就像下面的答案;D

【参考方案1】：

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

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

<input type="checkbox" checkedIf checked>

【参考方案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>

【参考方案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>