Partiels conditionnels dans le guidon

Question

J'ai les données suivantes que j'essaie de nourrir un modèle de guidon

{
    "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"
                }
            ]
        }
    ]
}

J'ai créé et enregistré 2 partiels, un qui modèle "sélectionne" les éléments de formulaire et celui qui modèle les entrées "radio". Je ne peux pas savoir quel type d'élément de formulaire sera dans les données, j'ai donc besoin d'une sorte d'assistance qui vérifie si type == select et applique le partiel approprié pour la sélection. J'ai du mal à créer une telle aide.

Je pensais remplacer Type = Sélectionner dans les données pour simplement sélectionner = true et simplement vérifier vrai / faux en utilisant l'assistance if / else, mais je préfère garder le format standardisé

Des idées?

Answer 1

J'ai fini par utiliser cette aide

// 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);
    }
  });

La source: http://doginthehat.com.au/2012/02/comparison-lock-helper-for-handlebars-templates/

Answer 2

J'ai construit quelque chose de similaire:

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

Et puis j'ai une classe de terrain qui est utilisée pour spécifier le champ. L'astuce est le typeXXX champs que j'utilise pour définir ce qu'il faut rendre.

// 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()
});

Exemple:

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});
];

Et enfin, ma vue de modèle fait un changement sur ce tableau:

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

Modèles de guidon pour les commandes de formulaire:

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