[英]how can I print the text of 'this' list item by backbone.js?
I'm new at Backbone.js.And I hava some problem at this keyworks.I hava a Backbone view blow: 我是Backbone.js的新手,并且在此按键上遇到了一些问题。
var print = Backbone.View.extend({
el : $('ul li.newItem'),
events : { 'click li.newItem':'printText'},
initialize:function(){
_.bind(printText,this); // does 'this' refer to the li.newItem ?
alert(1233); // init does't work.
},
printText : function(){
//I wanna print the hello world text each list item when clicked.
}
});
var print = new print();
Here is my demo : http://jsbin.com/evoqef/3/edit 这是我的演示: http : //jsbin.com/evoqef/3/edit
You have two problems that are keeping your initialize
from working: 您有两个问题无法使
initialize
工作:
printText
in scope. printText
。 _.bind
and _.bindAll
behave differently. _.bind
和_.bindAll
行为不同。 The first is easy to fix, you want to use this.printText
, not just printText
. 第一个很容易修复,您想使用
this.printText
,而不仅仅是printText
。
_.bind
binds a single function to a this
and returns that bound function; _.bind
将单个函数绑定到this
并返回该绑定函数; _.bindAll
, on the other hand, binds several named functions to a this
and leaves the bound functions attached to the specified this
. 另一方面,
_.bindAll
将几个命名函数绑定到this
,并将绑定函数_.bindAll
在指定的this
。 So, doing this: 因此,这样做:
_.bind(printText, this);
doesn't do anything useful as you're throwing away the bound function. 当您丢弃绑定函数时,它没有任何用处。 You'd want to do this:
您想这样做:
this.printText = _.bind(this.printText, this);
Or more commonly in Backbone apps, you'd use _.bindAll
: 或更常见的是在Backbone应用中,您可以使用
_.bindAll
:
_.bindAll(this, 'printText');
Now you have a functioning initialize
and you'll have the right this
inside printText
and we can move on to fixing printText
. 现在您有了一个可以正常运行的
initialize
并且在printText
拥有了this
printText
,我们可以继续进行printText
。 I think you want to extract the text from the <li>
that was clicked; 我认为您想从单击的
<li>
中提取文本; you can do this like this: 您可以这样做:
printText: function(ev) {
console.log($(ev.target).text());
}
But that still doesn't work and we're left to wondering what's going on here. 但这仍然行不通,我们只想知道这里发生了什么。 Well, Backbone binds events to a view's
el
so let us have a look at that: 好吧,Backbone将事件绑定到视图的
el
因此让我们看一下:
var print = Backbone.View.extend({
el : $('ul li.newItem'),
//...
When that Backbone.View.extend
runs, there won't be any li.newItem
elements in the DOM so you won't get a useful el
in that view. 当
Backbone.View.extend
运行,不会有任何li.newItem
在DOM元素,所以你不会得到一个有用的el
在这一观点。 The usual approach here would be to have a view that looks like this: 这里通常的方法是具有如下所示的视图:
var Print = Backbone.View.extend({
tagName: 'li',
events: {
'click': 'printText'
},
render: function() {
this.$el.text('Hello world ' + this.options.i);
return this;
},
printText: function(e){
console.log($(e.target).text());
}
});
We set tagName
to 'li'
and let Backbone create the <li>
by itself. 我们将
tagName
设置为'li'
然后让Backbone自己创建<li>
。 Then we'd pass the counter value to the Print
view as an argument, Backbone will take care of leaving the argument in this.options.i
when we say new Print({ i: ... })
. 然后,我们将计数器值作为参数传递给
Print
视图,当我们说new Print({ i: ... })
时,Backbone将负责将参数保留在this.options.i
。
Now we just have to adjust the addItem
method in your ListView
to create new Print
s and add them to the <ul>
: 现在我们只需要在
ListView
调整addItem
方法来创建新的Print
并将它们添加到<ul>
:
addItem: function(){
this.counter++;
var v = new Print({ i: this.counter });
this.$('ul').append(v.render().el);
}
Updated demo: http://jsbin.com/evoqef/10/edit 更新的演示: http : //jsbin.com/evoqef/10/edit
I've also made a few other changes: 我还做了其他一些更改:
this.$el
instead of $(this.el)
, there's no need to create something that's already available. this.$el
代替$(this.el)
,无需创建已经可用的东西。 this.$()
instead of $('ul', this.el)
, same result but this.$()
doesn't hide the context at the end of the $()
function call and this.$()
is more idiomatic in Backbone. this.$()
代替$('ul', this.el)
,结果相同,但是this.$()
不会在$()
函数调用结束时隐藏上下文,而this.$()
为在Backbone中更为惯用。 In your _.bind(printText, this);
在您的
_.bind(printText, this);
The printText
is outside of the scope of the init function. printText
在初始化函数的范围之外。 this
as your second argument represents the print Backbone.View. this
作为您的第二个参数表示打印Backbone.View。
You could do something like this: 您可以执行以下操作:
_.bind(this.printText, this);
and probably rid yourself of the init()
error. 并可能摆脱了
init()
错误。 But you could use this
inside of printText and it will represent your View anyway. 但是您可以在printText内部使用
this
,并且无论如何它将代表您的View。
printText: function() {
console.log(this); // this represents your view
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.