2014-04-01 89 views
9

我试图渲染选项中选择元素,像这样车把:有条件地添加属性

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

我用下面的把手帮手

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

的问题是,selected属性不会显示在任何option元素上,但是当我将console.log放置在手柄助手中时,我确实看到一个匹配(输入===颜色===真)。任何想法我在这里做错了吗?

回答

10

这就是所描述的工作示例,

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