Définition de la valeur sélectionnée d'un élément Select dans Handlebars

J'ai un guidon modèle que j'incorpore dans ma page html. Il y a un élément select avec toutes les options disponibles déjà rendus. Comment puis-je régler la valeur sélectionnée de la liste de sélection lorsque j'ai rendu mon modèle?

<script id="my-template" type="text/x-handlebars-template">      
    <div id="my-modal">
      <form action="/TestAction" method="post">
        <input id="MyId" name="MyId" type="hidden" value="{{MyId}}" />      
        <label for="Test">Test: (optional)</label>
        <select id="Test" name="Test">
          <option value="">-- Choose Test --</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </form>
    </div>
</script>

source d'informationauteur Keith Rousseau

handlebars.js

24

Si vous ne voulez pas créer de l'option de l'assistant, vous pouvez utiliser une combinaison d'un petit personnalisée guidon d'aide et de contexte parent, notée à l'aide de la ../ syntaxe:

Premier à écrire le helper:
```
Handlebars.registerHelper('selected', function(option, value){
    if (option === value) {
        return ' selected';
    } else {
        return ''
    }
});
```
Et puis dans votre modèle, vous appelez votre aide et de passer dans le contexte parent à l'intérieur de la each boucle pour vérifier pour selectedState
```
{{#each states}}
    <option value="{{this}}" {{selected this ../selectedState}}>{{this}}</option>
{{/each}}
```
9

J'ai pris la {{#each}} helper comme source d'inspiration, et a écrit un helper personnalisé qui fait la même chose: des boucles sur une liste, et continuellement ajoute le contenu de la arguments pour une chaîne de sortie. (À partir d'ici: Guidon bloc d'aides)

Dans ce cas, je ne suis pas en passant dans un petit morceau de template HTML pour servir de la fonction options paramètre, comme vous le feriez lors de l'utilisation de {{#each}}. Au lieu de cela je suis juste à la construction de la <option>
les balises par la force brutale, et essai de chaque itération de la context liste. Enfin, je reviens d'une grande chaîne de <option></option> balises, et j'espère que l'un d'eux a selected="selected".

La fonction:
```
Handlebars.registerHelper('options_selected', function(context, test) {
    var ret = '';
    for (var i = 0, len = context.length; i < len; i++) {
        var option = '<option value="' + context[i]+'"';
        if (test.toLowerCase() == context[i].toLowerCase()) {
            option += ' selected="selected"';
        }
        option += '>'+ Handlebars.Utils.escapeExpression(context[i]) + '</option>';
        ret += option;
    }

    return new Handlebars.SafeString(ret);
});
```
La balise en cours d'utilisation:
```
<script id="form-state" type="text/x-handlebars-template">
    <select name="state">
    {{{options_selected states selectedState}}}
    </select>
</script>
```
Veuillez suggérer des modifications pour améliorer ce, merci!

Voici une solution (construit sur EmberJS pour faciliter la JS partie)

J'ai refait votre échantillon un peu, pour avoir des objets pour les propositions de valeurs, qui peuvent par la manière de porter le selected attribut...

Le modèle partie:

<script type="text/x-handlebars" data-template-name="my-template">
    <div id="my-modal">
      <form action="/TestAction" method="post">
        <input id="MyId" name="MyId" type="hidden" value="{{MyId}}" />      
        <label for="Test">Test: (optional)</label>
        <select id="Test" name="Test">
          <option value="">-- Choose Test --</option>
          {{#each values}}
              <option {{bindAttr value="id" selected="selected"}}>{{label}}</option>
          {{/each}}
        </select>
      </form>
    </div>
</script>

La JS partie:

App.MyView = Ember.View.extend
    templateName: 'my-template'

    MyId: 42
    values: [{
        id: 1,
        label: '1'
    }, {
        id: 2,
        label: '2'
    }, {
        id: 3,
        label: '3',
        selected: true
    }, {
        id: 4,
        label: '4'
    }]

Vous pouvez essayer @ http://jsfiddle.net/MikeAski/uRUc3/

Vous pouvez utiliser des valeurs directement dans le Guidon comme modèle.

Guidon Modèle

<select id="distance">
        <option value="15" {{#if (isEqual 15 distance)}} selected {{/if}}>15</option>
        <option value="25" {{#if (isEqual 25 distance)}} selected {{/if}}>25</option>
        <option value="50" {{#if (isEqual 50 distance)}} selected {{/if}}>50</option>
        <option value="100" {{#if (isEqual 100 distance)}} selected {{/if}}>100</option>
        <option value="300" {{#if (isEqual 300 distance)}} selected {{/if}}>300</option>
</select>

Guidon Helper

define(['hbs/handlebars'], function (Handlebars) {
  'use strict';

  Handlebars.registerHelper('isEqual', function (expectedValue, value) {
    return value === expectedValue;
  });
});

-1

J'ai eu le même problème.
```
$('select').val(value);
```
C'est comment je l'ai résolu, j'ai mis la valeur souhaitée avec jQuery après le rendu du modèle. A été étonnamment facile. (C'est peut-être aussi un moyen de garder les modèles logicless)

Vous devez vous connecter pour publier un commentaire.