Einstellen des ausgewählten Werts eines Select-Elements im Lenker

Question

Ich habe eine Lenkervorlage, die ich in meine HTML-Seite einbettle. Es gibt ein select-Element mit allen verfügbaren Optionen, die bereits gerendert wurden. Wie kann ich den ausgewählten Wert der Auswahlliste beim Rendern meiner Vorlage festlegen?

<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

Hier ist eine Lösung (über EmberJS baute das JS Teil zu erleichtern)

ich Ihre Probe ein wenig, Objekte zu haben, für die vorgeschlagenen Werte Refactoring, die die selected Attribut durch die Art und Weise tragen kann .. .

Die Vorlage Teil:

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

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

Sie können es versuchen @http://jsfiddle.net/MikeAski/uRUc3/

Answer 2

nahm ich den {{#each}} Helfer als Inspiration, und schrieb einen benutzerdefinierten Helfer, die das gleiche tut: Schleifen über eine Liste, und fügt ständig den Inhalt der Argumente an einen Ausgang Zeichenfolge. (Von hier: Handlebars block helpers)

In diesem Fall übergebe ich nicht einen Teil des HTML-Templates, das als options-Parameter der Funktion dient, wie bei Verwendung von {{#each}}. Stattdessen baue ich einfach die <option> Tags mit roher Gewalt auf und prüfe jede Iteration der context Liste. Schließlich gebe ich eine große lange Reihe von <option></option> Tags zurück, und hoffentlich hat einer von ihnen selected="selected".

Die Funktion:

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

Der Tag im Einsatz:

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

Bitte legen nahe, alle Änderungen, die dies verbessern würde, danke!

Answer 3

Ich hatte das gleiche Problem.

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

So habe ich es gelöst, ich habe den gewünschten Wert mit jQuery nach dem Rendern der Vorlage eingestellt. War überraschend einfach. (Vielleicht ist es auch ein Weg, um die Vorlagen logiklos zu halten)

Answer 4

Wenn Sie die Option als Teil des Helfers nicht ausbauen möchten, können Sie eine Kombination aus einem kleinen benutzerdefinierten Lenker Helper und Elternkontext, bezeichnet mit verwenden die ../ Syntax:

zuerst die Helfer schreiben:

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

und dann in der Vorlage Sie Ihre Helfer rufen und im übergeordneten Kontext innerhalb der each Schleife passieren zu prüfen selectedState

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

Answer 5

Sie können Werte wie in der Vorlage Lenker so direkt verwenden.

Lenker Vorlage

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

Lenker Helper

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

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