Configuración del valor seleccionado de un elemento Seleccionar en manubrios

Question

Tengo una plantilla de manillar que estoy incrustando en mi página html. Hay un elemento seleccionado con todas las opciones disponibles ya procesadas. ¿Cómo puedo establecer el valor seleccionado de la lista de selección cuando renderizo mi plantilla?

<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

Aquí es una solución (construida sobre EmberJS para aliviar la parte JS)

I refactorizado su muestra un poco, tener objetos para los valores propuestos, que pueden por cierto llevar el atributo selected .. .

La parte de plantilla:

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

Puede probarlo @http://jsfiddle.net/MikeAski/uRUc3/

Answer 2

Tomé el ayudante {{#each}} como fuente de inspiración, y escribió un ayudante personalizado que hace la misma cosa: un bucle a través de una lista y añade continuamente los contenidos de los argumentos a una salida cuerda. (De aquí: Handlebars block helpers)

En este caso, no estoy pasando un trozo de plantilla HTML para servir como el parámetro options de la función, como lo haría al usar {{#each}}. En su lugar, solo estoy construyendo las etiquetas <option> por fuerza bruta, y probando cada iteración de la lista context. Por último, devuelvo una gran cadena larga de etiquetas <option></option>, y con suerte una de ellas tiene selected="selected".

La función:

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 etiqueta en uso:

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

Para sugerir las modificaciones que mejorarían esto, gracias!

Answer 3

Tuve el mismo problema.

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

Así es como lo resolví, fijo el valor deseado con jQuery después de rendir la plantilla. Fue sorprendentemente fácil. (Quizás también sea una forma de mantener las plantillas sin lógica)

Answer 4

Si no desea compilar la opción como parte del asistente, puede usar una combinación de un pequeño asistente de manubrio personalizado y el contexto primario, indicado mediante la sintaxis ../:

escribir el ayudante:

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

y luego en su plantilla se llama a su ayudante y pasa en el contexto de los padres dentro del bucle each para comprobar si hay selectedState

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

Answer 5

Puede usar los valores directamente en la plantilla de manubrios de ese modo.

Manillar Plantilla

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

Manillar ayudante

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

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