由于使用Backbone.js的有收藏绑在浏览网页（ RowsView ，创建一个<ul>它创建子视图（ RowView ，创建<li>集合中的每个型号，我有一个问题建立内联编辑为集合中的那些模型。
我创建了一个edit()的方法RowView替换视图li有一个文本框的内容，如果用户按下tab ，而在该文本框，我想触发edit()在接下来的观法名单。
我可以得到集合中的下一个模型的模型：
// within a RowView 'keydown' event handler
var myIndex = this.model.collection.indexOf(this.model);
var nextModel = this.model.collection.at(myIndex+1);
但问题是，如何找到被附加到模型视图。 父RowsView视图不保留对所有的孩子意见的参考; 它的render()方法就是：
this.$el.html(''); // Clear
this.model.each(function (model) {
this.$el.append(new RowView({ model:model} ).render().el);
}, this);
我是否需要重写一遍，以保持指针的单独阵列的所有RowView s具有下呢？ 或者是有一个聪明的办法找到那种有连接到它已知的模型视图？
这里是整个问题的的jsfiddle： http://jsfiddle.net/midnightlightning/G4NeJ/
这是不优雅存储到您的模型中查看的参考，但是你可以链接查看与事件模型，这样做：
// 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');
在RowView监听事件prepareEdit并在监听通话编辑（），是这样的：
this.model.on('prepareEdit', this.edit);
我说，你的RowsView应该跟踪其组件的RowView秒。 个人RowView真的是部分RowsView ，它是有道理的，一个视图应该跟踪它的零件。
所以，你的RowsView将有一个render的这样的方法排序：
render: function() {
this.child_views = this.collection.map(function(m) {
var v = new RowView({ model: m });
this.$el.append(v.render().el);
return v;
}, this);
return this;
}
然后你只需要一种方法来制表转换为指数this.child_views 。
一种方法是使用事件，骨干观点已经Backbone.Events在这样的观点混合可以触发事件，自己和其他的东西可以听这些事件。 在你RowView你可以有这样的：
events: {
'keydown input': 'tab_next'
},
tab_next: function(e) {
if(e.keyCode != 9)
return true;
this.trigger('tab-next', this);
return false;
}
和你的RowsView会v.on('tab-next', this.edit_next); 在this.collection.map ，你可以有一个edit_next的排序是这样的：
edit_next: function(v) {
var i = this.collection.indexOf(v.model) + 1;
if(i >= this.collection.length)
i = 0;
this.child_views[i].enter_edit_mode(); // This method enables the <input>
}
演示： http://jsfiddle.net/ambiguous/WeCRW/
在这一个变种是添加到一个参考RowsView到RowView秒，然后tab_next可以直接调用this.parent_view.edit_next()
另一种选择是把keydown处理程序中RowsView 。 这增加了一个位之间的耦合RowView和RowsView但是这可能不是在这种情况下，一个很大的问题，但它是比事件的解决方案丑陋了一下：
var RowsView = Backbone.View.extend({
//...
events: {
'keydown input': 'tab_next'
},
render: function() {
this.child_views = this.collection.map(function(m, i) {
var v = new RowView({ model: m });
this.$el.append(v.render().el);
v.$el.data('model-index', i); // You could look at the siblings instead...
return v;
}, this);
return this;
},
tab_next: function(e) {
if(e.keyCode != 9)
return true;
var i = $(e.target).closest('li').data('model-index') + 1;
if(i >= this.collection.length)
i = 0;
this.child_views[i].enter_edit_mode();
return false;
}
});
演示： http://jsfiddle.net/ambiguous/ZnxZv/
