Question

Given a page that uses Backbone.js to have a Collection tied to a View (RowsView, creates a <ul>) which creates sub Views (RowView, creates <li>) for each Model in the collection, I’ve got an issue setting up inline editing for those models in the collection.

I created an edit() method on the RowView view that replaces the li contents with a text box, and if the user presses tab while in that text box, I’d like to trigger the edit() method of the next View in the list.

I can get the model of the next model in the collection:

// within a RowView 'keydown' event handler
var myIndex = this.model.collection.indexOf(this.model);
var nextModel = this.model.collection.at(myIndex+1);

But the question is, how to find the View that is attached to that Model. The parent RowsView View doesn’t keep a reference to all the children Views; it’s render() method is just:

this.$el.html(''); // Clear
this.model.each(function (model) {
    this.$el.append(new RowView({ model:model} ).render().el);
}, this);

Do I need to rewrite it to keep a separate array of pointers to all the RowViews it has under it? Or is there a clever way to find the View that’s got a known Model attached to it?

Here’s a jsFiddle of the whole problem: http://jsfiddle.net/midnightlightning/G4NeJ/

Answer 1

It is not elegant to store a reference to the View in your model, however you could link a View with a Model with events, do this:

// within a RowView 'keydown' event handler
var myIndex = this.model.collection.indexOf(this.model);
var nextModel = this.model.collection.at(myIndex+1);
nextModel.trigger('prepareEdit');

In RowView listen to the event prepareEdit and in that listener call edit(), something like this:

this.model.on('prepareEdit', this.edit);