Условные обертоны в Рули

Question

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

{ 
    "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 партиалов один, что шаблоны «выбирает» элементы формы и один, что шаблоны «радио "входы. Я не могу знать, какой тип элемента формы будет в данных, поэтому мне нужен какой-то помощник, который проверяет, выбирает ли type ==, и применяет ли соответствующий элемент для выбора. У меня возникают проблемы с созданием такого помощника.

Я думал о замене типа = выбрать в данных, просто выберите = верно и просто проверить истина/ложь, используя, если/еще помощника, но я предпочел бы сохранить формат стандартизирован

Любые идеи?

Answer 1

I закончил использование этого помощника

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

Answer 2

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

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