Условные частичные в руле - PullRequest
Новая
       11

Условные частичные в руле

4 голосов
/ 28 февраля 2012

У меня есть следующие данные, которые я пытаюсь вставить в шаблон Handlebar 

{
    "set-group": [
        {
            "label": "Source Data",
            "type": "select",
            "options": [
                {
                    "value": "Default Selections"
                },
                {
                    "value": "Other Selections"
                }
            ]
        },
        {
            "label": "Scale",
            "type": "radio",
            "options": [
                {
                    "value": "log",
                    "label": "Log",
                    "groupname": "group2"
                },
                {
                    "value": "linear",
                    "label": "Linear",
                    "groupname": "group2"
                }
            ]
        }
    ]
}

Я создал и зарегистрировал 2 Partials, один из которых «выбирает» элементы формы, а другой - «радио». Я не могу знать, какой тип элемента формы будет в данных, поэтому мне нужен какой-то помощник, который проверяет, если type == select и применяет соответствующий партиал для select. У меня проблемы с созданием такого помощника.

Я думал о замене type = select в данных, чтобы просто выбрать = true и просто проверить true / false с помощью помощника if / else, но я бы предпочел сохранить формат стандартизированным

Есть идеи?

Ответы [ 2 ]

13 голосов
/ 01 марта 2012

Я использовал этот помощник 

// Comparison Helper for handlebars.js
// Pass in two values that you want and specify what the operator should be
// e.g. {{#compare val1 val2 operator="=="}}{{/compare}}

Handlebars.registerHelper('compare', function(lvalue, rvalue, options) {

    if (arguments.length < 3)
        throw new Error("Handlerbars Helper 'compare' needs 2 parameters");

    operator = options.hash.operator || "==";

    var operators = {
        '==':       function(l,r) { return l == r; },
        '===':      function(l,r) { return l === r; },
        '!=':       function(l,r) { return l != r; },
        '<':        function(l,r) { return l < r; },
        '>':        function(l,r) { return l > r; },
        '<=':       function(l,r) { return l <= r; },
        '>=':       function(l,r) { return l >= r; },
        'typeof':   function(l,r) { return typeof l == r; }
    }

    if (!operators[operator])
        throw new Error("Handlerbars Helper 'compare' doesn't know the operator "+operator);

    var result = operators[operator](lvalue,rvalue);

    if( result ) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }
  });

Источник: http://doginthehat.com.au/2012/02/comparison-block-helper-for-handlebars-templates/

2 голосов
/ 29 февраля 2012

Я построил нечто подобное: 

// superclass for all form field views
App.FormFieldView = Ember.View.extend({
    classNames: 'formFieldView',
    field: null,
    ...
});

// form field with just text
App.FormFieldTextView = App.FormFieldView.extend({
    templateName: 'formfield-text',
    ...
});

// form field with checkbox
App.FormFieldCheckboxView = App.FormFieldView.extend({
    templateName: 'formfield-checkbox',
    ...
});

... and so on (have more types for date selector, select lists etc)

И тогда у меня есть класс поля, который используется для указания поля.Хитрость заключается в полях typeXXX, которые я использую, чтобы определить, что нужно визуализировать. 

// field definition in controller.
App.Field = Ember.Object.extend({ 
    label: null,
    required: true,
    value: null,
    typeText: function () { // defaults to typeText
        return !(this.get('typeDate') || this.get('typeSelect') 
                 || this.get('typeCheckbox')
                 || this.get('typeInfo'));
    }.property('typeDate', 'typeSelect', 'typeCheckbox', 'typeInfo').cacheable()
});

Пример: 

var fields = [
    App.Field.create({ label: 'First name',
                       valueBinding: 'App.model.firstName'
                     }),
    App.Field.create({ label: 'I have a valid work permit for working in India.',
                       valueBinding: 'App.model.validWorkingIndia',
                       typeCheckbox: true});
];

И, наконец, мой шаблонный вид переключает этот массив: 

      <fieldset>
        <dl>
          {{#each fields}}
            {{#if typeText}}
              {{view App.FormFieldTextView fieldBinding="this"}}
            {{/if}}
            {{#if typeCheckbox}}
              {{view App.FormFieldCheckboxView fieldBinding="this"}}
            {{/if}}

            ... more types here

          {{/each}}
        </dl>
      </fieldset>

Шаблоны руля для элементов управления формой: 

  <script type="text/x-handlebars" data-template-name="formfield-text">
    <dt><label>
        {{field.label}}{{#if field.required}}*{{/if}}
    </label></dt>
    <dd>{{view Ember.TextField valueBinding="field.value"}}</dd>
  </script>

  <!-- dd/dt deliberately in the wrong order -->
  <script type="text/x-handlebars" data-template-name="formfield-checkbox">
    <dd class="checkbox">
      {{view Ember.Checkbox valueBinding="field.value"}}
    </dd>
    <dt class="checkbox"><label>{{field.label}}{{#if field.required}}*{{/if}}
        </label></dt>
  </script>
...