2014-04-01 18 views
9

Ich versuche, ein select-Element mit Optionen zu machen, wie dieseLenker: bedingt Attribut hinzufügen

<select dropdown multiple class="dropdown" name="color"> 
     {{#each colors}} 
      <option value="{{value}}" {{isSelected parentColor id}}>{{title}}></option> 
     {{/each}} 
</select> 

Ich verwende den folgenden Lenker Helfer

Handlebars.registerHelper('isSelected', function(input, color) { 
    return input === color ? 'selected' : ''; 
}); 

Das Problem ist, dass die selected Attribut wird nicht auf einem der option Element angezeigt, aber wenn ich eine console.log in den Lenker Helfer stelle ich sehe, dass man übereinstimmt (Eingabe === Farbe === wahr). Irgendwelche Ideen, was ich hier falsch mache?

Antwort

10

Dies ist ein funktionierendes Beispiel von dem, was beschrieben wird,

http://jsfiddle.net/rtLGR/

hbs

<h1>Handlebars JS Example</h1> 
<script id="some-template" type="text/x-handlebars-template"> 

    <select dropdown multiple class="dropdown" name="color"> 
     {{#each colors}} 
      <option value="{{value}}" {{isSelected parentColor id}}>{{title}}</option> 
     {{/each}} 
</select> 
</script> 

js

var source = $("#some-template").html(); 
var template = Handlebars.compile(source); 

var data = { 
    colors: [ 
     {id:1,value:1,title:"red",parentColor:2}, 
     {id:2,value:2,title:"green",parentColor:2}, 
     {id:3,value:3,title:"blue",parentColor:1} 
    ] 
}; 


Handlebars.registerHelper('isSelected', function (input, color) { 
    return input === color ? 'selected' : ''; 
}); 

$('body').append(template(data));