0

我有一个名为的模型TimesheetRow和一个名为TimesheetRows.

如果我调用TimesheetRows.reset(newCollection);where是JSON 格式newCollection的四个模型的集合，我的页面上会出现四个新的模型视图。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函数中的任何代码对我来说是必需的。这是我缺少代码的地方吗？

4

1 回答 1

1

collection.reset()如果您将模型作为参数传递，则仅从您的集合中删除模型并将其他集合放入其中。

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

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

或者

只需使用您的方法删除requestTimesheet即可。

于 2012-10-19T13:01:35.217 回答