Ember js遍历json对象数组以创建元素

时间:2013-10-21 15:39:04

标签: javascript jquery arrays json ember.js

尝试使用json对象数组中的选项动态创建选择输入。 JSON对象数组如下所示:

var curr_sel = [
    {v:"1", n:"USD"},
    {v:"2", n:"GBP"},
    {v:"3", n:"CAD"},
    {v:"4", n:"AUD"},
    {v:"5", n:"EUR"}
];

我的视图模板包含以下内容:

<select>
{{#each opt in curr_sel}}
    <option value="{{ opt.v }}" >{{ opt.n }}</option>
{{/each}}
</select>

但是这会产生一个没有选项的选择元素。请帮助。如果它意味着使用EmberJS选择类http://emberjs.com/api/classes/Ember.Select.html

,那就更好了

1 个答案:

答案 0 :(得分:1)

使用select标记的更好方法是使用Ember.Select

以下是一个示例:

<强>模板

<script type="text/x-handlebars" data-template-name="application">   
  {{view Ember.Select content=curr_sel
    optionLabelPath="content.n"
    optionValuePath="content.v"
    selection=selectedCurrency}}
</script>

<强>的Javascript

App = Ember.Application.create({});

App.ApplicationController = Ember.Controller.extend({
    curr_sel: [
        {v:"1", n:"USD"},
        {v:"2", n:"GBP"},
        {v:"3", n:"CAD"},
        {v:"4", n:"AUD"},
        {v:"5", n:"EUR"}
    ],
    selectedCurrency: null,
    selectedCurrencyChanged: function() {
        console.log(this.get('selectedCurrency.n'));
    }.observes('selectedCurrency')
});

看看这个小提琴,看看这个动作http://jsfiddle.net/marciojunior/FJkEr/