javascript - How do I fill my view with my new backbone collection data after a reset?

Question

I have a model called TimesheetRow and a collection called TimesheetRows.

If I make a call to TimesheetRows.reset(newCollection); where newCollection is a collection of four TimesheetRow models in JSON format, four new model views appear on my page.

How can I fill these input and select fields with the values from the new collection? I've noticed that if I change a field on one of the four models, the collection itself is properly updated, it seems like a one-way bind (does that make sense?).

Here is some code, I apologize for the quantity.

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();

In my changed function, I include Timesheet prefix because my IDs on those fields are all prefixed with Timesheet.

I know for a fact that my new JSON collection object is correctly formatted.

The two lines that are commented out in the TimesheetRowView initialize function were giving me trouble when I would update fields. I'm not sure if they are required or not.

Questions:

1. When I "reset", my previous model views are still present, how would I get rid of them? Should I use JQuery?

2. I expect at some point I need to add the Timesheet prefix back on, for the models to find the right IDs. At which step or in which function do I do this? (This ties in to the "one-way bind" I mentioned.)

3. I've been following along slightly with the TODO application, and I didn't find any of the code in the render function to be necessary for my side, in the FullView. Is this where I'm missing code?

Answer 1

collection.reset() only removes the models from your collection and put other collection in there if you pass them as a param.

To have your views removed from DOM you should do it yourself.

A way to do it is to listen to the reset event it triggers when all is done and create a method that removes your views from the DOM.

Or

Just remove then in that requestTimesheet method of yours.