[英]Accessing a method on a Backbone.js view inside of loop
I'm working on an app that has an ItemListView
that contains a number of ItemView
elements. 我正在开发一个包含包含多个
ItemView
元素的ItemListView
的应用程序。 In my ItemListView
, I'm using the jQuery .each()
method to loop through the collection of items and render them as list elements. 在我的
ItemListView
,我使用jQuery .each()
方法遍历项目集合并将它们呈现为列表元素。
I've got all the pieces in place except for the actual attaching of the li
elements to the containing ul
. 除了将
li
元素实际附加到包含的ul
之外,我已经准备好了所有内容。 The sticking point is getting access to the ItemListView.appendItem
method from inside of my .each()
loop. 症结在于从我的
.each()
循环内部访问ItemListView.appendItem
方法。 I've tried using this.appendItem
and self.appendItem
, but inside the loop this
is the item
and self
is the window
object. 我试过使用
this.appendItem
和self.appendItem
,但是在循环内部this
是item
而self
是window
对象。
Here's what I have right now: 这是我现在所拥有的:
ItemListView = Backbone.View.extend({
el: '#item-rows',
initialize: function () {
this.collection = new Items();
this.render();
},
render: function () {
$.each(this.collection.models, function (i, item) {
var itemview = new ItemView( { model: item });
this.appendItem(itemview); // this refers to the item, so appendItem is undefined
});
},
appendItem: function (itemView) {
$(this.el).append(itemView.render().el);
}
});
var itemlistview = new ItemListView;
I'm pretty sure that the context issue is the only problem, as I've examined the other pieces of the this by outputting them to the console and they look fine. 我非常确定上下文问题是唯一的问题,因为我已经通过将其他内容输出到控制台检查了它们的其他部分,并且看起来还不错。
What am I missing? 我想念什么?
A more Backbone-y way to do this would be to use the collection's each
, provided by underscore.js: 实现此目标的一种更为Backbone的方法是使用underscore.js提供的collection的
each
:
render: function() {
this.collection.each( function( item, index ) {
var itemView = new ItemView( { model:item } );
this.appendItem( itemView );
}, this );
return this;
}
Notes: 笔记:
each
which take a reference to bind the function to each
参数的第二个参数,它们将引用绑定到 each
takes the element first and the index second each
取第一个元素,第二个索引 render
should generally return this
for chaining purposes (as mentioned in the docs ), I don't think your appendItem
function will work as you expect without this part render
通常应出于链接目的返回this
值(如docs中所述),我认为如果没有这一部分,您的appendItem
函数将不会按预期工作 Yeah, it's a pretty simple fix. 是的,这是一个非常简单的修复。 You just gotta refer to the
this
in the outer context. 您只需要在外部上下文中参考
this
。
render: function () {
var somereftothis = this;
$.each(this.collection.models, function (i, item) {
var itemview = new ItemView( { model: item });
somereftothis.appendItem(itemview); // this refers to the item, so appendItem is undefined
});
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.