重置后如何用新的主干收集數據填充視圖？

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函數中注釋掉的兩行給我帶來麻煩。 我不確定是否需要它們。

問題：

1. 當我“重置”時，以前的模型視圖仍然存在，我該如何擺脫它們？ 我應該使用JQuery嗎？

2. 我希望在某個時候需要重新添加Timesheet前綴，以便模型找到正確的ID。 我應該在哪個步驟或哪個功能上執行此操作？ （這與我提到的“單向綁定”有關。）

3. 我一直在密切關注TODO應用程序，但在FullView中，我這一邊並沒有需要render函數中的任何代碼。 這是我丟失代碼的地方嗎？

Answer 1

collection.reset()僅在將模型作為參數傳遞時才將其從集合中刪除，並將其他集合放入其中。

要從DOM中刪除視圖，您應該自己進行操作。

一種方法是偵聽所有操作完成后觸發的reset事件，並創建一種從DOM中刪除視圖的方法。

要么

只需在您的那個requestTimesheet方法中刪除即可。