如何在Meteor(带有空格键模板)中指示输入控件的“已检查"或“选定"状态? [英] How do I indicate 'checked' or 'selected' state for input controls in Meteor (with spacebars templates)?

问题描述

因此，在与Meteor一起工作时，我试图在Spacebars模板中保持高效和整洁.但是我对处理复选框和选择选项的方式感到困惑.假设我要根据我的一个收藏集中的文档中的标志设置一个复选框是否选中.我似乎无法执行以下操作:

So I'm trying to be efficient and clean in my Spacebars templates as I work with Meteor. But I'm stumped by the way in which checkboxes and select options are to be dealt with. Suppose I want to have a checkbox set as checked or not depending on a flag that is in a document in one of my collections. I don't appear to be able to do the following:

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

尝试此操作时，出现以下错误:

When I try this, I get the following error:

A template tag of type BLOCKOPEN is not allowed here.

但是，如果我尝试以下选项，则即使标记为false，它们也会导致复选框被选中:

If I try the following options, though, they all result in the checkbox being checked even when the flag is 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遇到了同样的麻烦，所以我最终做了如下操作来解决它，这似乎很冗长且容易出错:

I have the same trouble with selected in my select options, so I end up doing something like the following to get around it, which seems verbose and error-prone:

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

推荐答案

您可以使用非阻塞帮助器来放置此类参数:

You can use non-block helpers for placing such arguments:

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

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

这篇关于如何在Meteor(带有空格键模板)中指示输入控件的“已检查"或“选定"状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！