Как указать состояние «отмечено» или «выбрано» для элементов управления вводом в Meteor (с шаблонами пробелов)?

Поэтому я стараюсь быть эффективным и чистым в своих шаблонах пробелов, когда работаю с 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>

meteor spacebars meteor-helper
person jononomo    schedule 24.09.2014    source источник
comment
Вы пробовали только помощника и без оператора {{#if}}? checked={{isChecked c=this.flag}} Я не уверен, что вы можете использовать операторы open внутри тегов. -untested EDIT: проверил одну из моих реализаций, и вот как я это сделал (Метеор 0.8.0+). Да, как ответ ниже; D   -  person below9k    schedule 25.09.2014

Ответы (3)


arrow_upward
7
arrow_downward

Вы можете использовать неблочные помощники для размещения таких аргументов:

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

<input type="checkbox" {{checkedIf checked}}>
person Hubert OG    schedule 24.09.2014

arrow_upward
2
arrow_downward

Вот пример кода, который я использую для решения этой проблемы, это должно быть довольно просто.

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>

РЕДАКТИРОВАТЬ: используя универсальные помощники, как намекнул Хьюберт О.Г.:

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>
person saimeunt    schedule 24.09.2014

arrow_upward
2
arrow_downward

Лучший, наиболее эффективный и действенный способ добиться этого — настроить глобальные помощники шаблонов, по одному для определения значений 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>
person Keith Dawson    schedule 13.08.2015