Impostazione del valore selezionato di un elemento Select in Handlebars

Question

Ho un modello di manubri che sto incorporando nella mia pagina html. C'è un elemento select con tutte le opzioni disponibili già renderizzate. Come posso impostare il valore selezionato dell'elenco di selezione quando eseguo il rendering del mio modello?

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

Answer 1

Ecco una soluzione (costruita su EmberJS per alleviare la parte JS)

ho riscritta vostro campione un po ', per avere oggetti per i valori proposti, che possono tra l'altro portare l'attributo selected .. .

La parte di modello:

<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 parte JS:

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' 
    }] 

Si può provare @http://jsfiddle.net/MikeAski/uRUc3/

Answer 2

ho preso la {{#each}} aiutante come ispirazione, e ha scritto un aiutante personalizzato che fa la stessa cosa: loop su una lista, e aggiunge continuamente i contenuti degli argomenti ad un'uscita stringa. (Da qui: Handlebars block helpers)

In questo caso, non sto passando una parte del modello HTML per fungere da parametro options della funzione, come si farebbe quando si utilizza {{#each}}. Invece sto solo costruendo i tag in base alla forza bruta e testando ogni iterazione dell'elenco context. Infine, restituisco una lunga stringa lunga di tag <option></option>, e speriamo che uno di loro abbia selected="selected".

La funzione:

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

Il tag in uso:

<script id="form-state" type="text/x-handlebars-template"> 
    <select name="state"> 
    {{{options_selected states selectedState}}} 
    </select> 
</script> 

Per qualsiasi proposta di modifiche che potrebbero migliorare questo, grazie!

Answer 3

Ho avuto lo stesso problema.

$('select').val(value); 

Ecco come ho risolto, ho impostato il valore desiderato con jQuery dopo aver reso il modello. Era sorprendentemente facile. (Forse è anche un modo per mantenere i modelli privi di logica)

Answer 4

Se non si desidera creare l'opzione come parte dell'helper, è possibile utilizzare una combinazione di un piccolo manubrio di comandi personalizzati e di un contesto padre, indicato utilizzando il ../ sintassi:

primo scrivere l'helper:

Handlebars.registerHelper('selected', function(option, value){ 
    if (option === value) { 
     return ' selected'; 
    } else { 
     return '' 
    } 
}); 

e poi nel modello si chiama il tuo aiuto e passare nel contesto genitore all'interno del ciclo each per verificare la presenza di selectedState

{{#each states}} 
    <option value="{{this}}" {{selected this ../selectedState}}>{{this}}</option> 
{{/each}} 

Answer 5

È possibile utilizzare i valori direttamente nel modello Handlebars in questo modo.

Manubrio Template

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

Manubrio Helper

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

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