Question

我是Backbone的新手，我在学习的过程中遇到了这个问题，我试图解决这个问题已经有一段时间了，这很烦人。我正在为模型中的每个属性渲染一个下拉列表。当我更改所选值时，我想更新模型。当我尝试在OrderView中捕获更改事件时，它不起作用。如果我在OrderingView中这样做，它可以工作，但我需要搜索当前的模型。

我在这里做错了什么？

情况：我有这个模型：

var Order = Backbone.Model.extend({
            defaults:{
                column: '',
                order: ''
            }

       });

和具有Order作为模型的相应集合。意见：

var orderView = Backbone.View.extend({
            model: new Order(),
            initialize: function(){
                this.template = _.template(order_template);

            },
            render: function(){
                var temp = this.template({model:this.model.toJSON(),order_columns:this.order_columns});
                this.$el.html(temp);
                return this;
            },
            events: {
                'change .order_columns': 'change_column'
            },
            change_column: function(){
                  console.log('column changed..');
            }
        });

var orderingView = Backbone.View.extend({
            model: new OrderCollection(),
            initialize: function(){

                var that = this;
                _(this.options.orderings).each(function(or){
                   that.model.add(new Order({column: or.column, order: or.order}));
                });

                this.model.on('add', this.render, this);
                this.model.on('change', this.changed_item,this);

            },
            render: function(){

                var that = this;
                that.$el.html('');

                var temp_order = '';

                _.each(this.model.toArray(), function(ordering, i){
                    var obj = new orderView({model: ordering, order_columns: that.options.order_columns}).render().$el.html();
                    temp_order += obj;     
                });

                var temp = _.template(ordering_template,{element: temp_order});
                that.$el.html(temp);

                $(document).ready(function(){

                    $('.add-ordering').click(function(){

                         var new_order = new Order({column: 'none', order: 'ASCENDING'});
                         that.model.add(new_order);

                    });
                });

                return this;
            },

        });

并且使用requirejs来调用来自不同的文件：

that.orderView = new orderingView({el:table, 
                    orderings: that.data.models.layers[0].orderings, 
                    order_columns:that.data.models.layers[0].columns});

我还使用requirejs在开头加载html模板，称为order_template和ordering_template

模板：

<div class="control-group">
    <div class="controls" style="margin-left:30px;">
        <select class="order_columns" name="columns" style="float:left;">
                            <option value='none' <%=model.column==='none'? 'selected': ''%>>None</option>   
                             <% _(order_columns).each(function(col){ %>   
                             <option value="<%=col.alias%>" <%=model.column===col.alias? 'selected': ''%>><%= col.name %></option>
                             <% }); %>   
        </select>
        <select class="ordering" name="ordering" style="float:left;margin-left:10px;">
                                <option value='ASCENDING' <%=model.order === 'ASCENDING'? 'selected':''%> >ASC</option>
                                <option value='DESCENDING' <%=model.order === 'DESCENDING'? 'selected':''%>>DESC</option>
        </select>
        <span class="ui-icon ui-icon-circle-close ui-order-close <%=model.column%>" style="margin-left:10px;"></span>
    </div>
</div>

和ordering_template

<div class="row">
    <form class="form-horizontal span12">
    <fieldset>
            <br/>
            <div class="row">
                <div class="span9 ordering_div" style="width:520px;">
                     <%=element%>
                </div>
            </div>

        </fieldset>
    </form>

</div>

有什么建议吗？

Backbone下拉更改不会更新集合中的模型

0 个答案: