Question

我有一个名为TimesheetRow的模型和一个名为TimesheetRows的集合。

如果我打电话给TimesheetRows.reset(newCollection);，其中newCollection是JSON格式的四个TimesheetRow模型的集合，我的页面上会显示四个新的模型视图。

如何填写这些输入并使用新集合中的值选择字段？我注意到如果我在四个模型中的一个上更改一个字段，集合本身就会正确更新，它看起来像是一个单向绑定（这有意义吗？）。

这是一些代码，我为数量道歉。

var TimesheetRow = Backbone.Model.extend({

        defaults: function () {
            return {
                MondayHours: 0,
                TuesdayHours: 0,
                WednesdayHours: 0,
                ThursdayHours: 0,
                FridayHours: 0,
                SaturdayHours: 0,
                SundayHours: 0,
                JobNo_: null,
                PhaseCode: null,
                TaskCode: null,
                StepCode: null,
                WorkTypeCode: null,
                Description: "",
            };
        },

        clear: function () {
            this.destroy();
        }
    });

var TimesheetRowList = Backbone.Collection.extend({

    model: TimesheetRow,

});

var TimesheetRows = new TimesheetRowList;

var TimesheetRowView = Backbone.View.extend({

    template: _.template($('script.timesheetTemplate').html()),

    events: {,
        "change input"                      : "changed",
        "change select"                     : "changed"
    },

    render: function () {
        Backbone.Model.bind(this);
        this.$el.html(this.template(this.model.toJSON())).hide().slideDown();  
        return this;
    },

    initialize: function () {
        _.bindAll(this, "changed");
        //this.model.bind('change', this.render, this);
        //this.model.bind('reset', this.render, this);
        this.model.bind('destroy', this.remove, this);
    },

    changed: function (evt) {
        var changed = evt.currentTarget;
        var value = this.$("#"+changed.id).val();
        var obj = "{\""+changed.id.replace("Timesheet", "") +"\":\""+value+"\"}";
        var objInst = JSON.parse(obj);
        this.model.set(objInst);
    },


});

var TimesheetRowsFullView = Backbone.View.extend({

    el: $("#timesheet-rows-container-view"),

    events: {
        "click #add-new-timesheet-row"      : "createRow",
        "click #submit-new-timesheet"       : "submitTimesheet",
        "click #request-sample-timesheet"   : "requestTimesheet"

    },

    initialize: function () {
        TimesheetRows.bind('add', this.addOne, this);
        TimesheetRows.bind('reset', this.addAll, this);
        TimesheetRows.bind('all', this.render, this);


    },

    addOne: function (timesheetrow) {
        var view = new TimesheetRowView({ model: timesheetrow });
        this.$("#timesheet-start-placeholder").prepend(view.render().el);
    },

    addAll: function () {
        TimesheetRows.each(this.addOne);
    },

    render: function () {
        //Is this the code I'm missing?

    },

    createRow: function () {
        TimesheetRows.create();
    },

    requestTimesheet: function () {
        //newCollection is retrieved from database in code that I've excluded.
        TimesheetRows.reset(newCollection);

    }

});

var TimesheetRowsFullViewVar = new TimesheetRowsFullView();

在我的changed函数中，我添加了Timesheet前缀，因为我在这些字段上的ID都以Timesheet为前缀。

我知道我的新JSON集合对象格式正确。

在TimesheetRowView initialize函数中注释掉的两行在我更新字段时给了我麻烦。我不确定他们是否需要。

问题：

当我“重置”时，我以前的模型视图仍然存在，我将如何摆脱它们？我应该使用JQuery吗？
我希望在某些时候我需要重新添加Timesheet前缀，以便模型找到正确的ID。在哪一步或哪个功能我这样做？（这与我提到的“单向绑定”有关。）
我一直在跟踪TODO应用程序，我在FullView中找不到render函数中我需要的任何代码。这是我缺少代码的地方吗？

Answer 1

collection.reset()仅从您的集合中移除模型，并将其他集合放在那里，如果您将它们作为参数传递。

要从DOM中删除您的视图，您应该自己动手。

执行此操作的方法是在完成所有操作后侦听它触发的reset事件，并创建一个从DOM中删除视图的方法。

或者

然后在您的requestTimesheet方法中删除。

重置后如何用我的新主干收集数据填充我的视图？

1 个答案: