javascript - 在 Backbone View 中编写下拉菜单

Question

我的数据在数组中返回 3 个对象。我循环遍历数组以从每个对象中获取 id 属性的值。

我想建立一个选择菜单，其中有 3 <option>标签。每个选项都包含对象的 id 值。我不确定为什么我的选择菜单没有呈现。这是我的代码:

(function () {

  var DimensionsModel = Backbone.Model.extend({

    url: 'http://jsonstub.com/calltestdata'

  });


  var DimensionsView = Backbone.View.extend({
    el: '.js-container',

    initialize: function () {
        var that = this;
        this.listenTo(this.model,'change', this.render);
        this.model.fetch({
            beforeSend: setHeader
        });
    },

    render: function () {
        console.log('inside render');
        console.log(this.model);
        console.log( this.model.get('dimensions').length );  //returns length of 3
        console.log( this.model.get('dimensions')[0].id ); //returns the id I expect

        var menu = '<select>';
        for (var i = 0, dimensionsLength = this.model.get('dimensions').length; i < dimensionsLength; i++) {
            console.log('ID = ' + this.model.get('dimensions')[i].id);
            menu += '<options>' + this.model.get('dimensions')[i].id + '</options>';

        }

        menu += '</select>';
        $(menu).appendTo(this.$el);

        return this;
    }
  });

  var myModel = new DimensionsModel();
  var myView = new DimensionsView({model: myModel});

}());

这是 HTML:

<div class="js-container">
</div>

编辑:这是一个 fiddle :http://jsfiddle.net/4UeRv/

Answer 1

如果您的 API 返回数组中的对象，您还应该使用 Backbone.Collection。