0

我是 Backbone.js 的新手。我在这个 keyworks 上遇到了一些问题。我有一个 Backbone 视图打击：

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

这是我的演示：http: //jsbin.com/evoqef/3/edit

4

2 回答 2

1

您有两个问题使您initialize无法工作：

  1. 范围内没有printText。
  2. _.bind并且_.bindAll表现不同。

第一个很容易修复，你想用this.printText，而不仅仅是printText。

_.bind将单个函数绑定到 athis并返回该绑定函数；_.bindAll另一方面，将多个命名函数绑定到 athis并将绑定的函数附加到指定的this. 所以，这样做：

_.bind(printText, this);

当您丢弃绑定函数时，它没有做任何有用的事情。你想这样做：

this.printText = _.bind(this.printText, this);

或者在 Backbone 应用程序中更常见的是，您会使用_.bindAll：

_.bindAll(this, 'printText');

现在你有一个功能initialize，你将拥有this里面的权利printText，我们可以继续修复printText。我认为您想从<li>单击的文本中提取文本；你可以这样做：

printText: function(ev) {
    console.log($(ev.target).text());
}

但这仍然行不通，我们想知道这里发生了什么。好吧，Backbone 将事件绑定到视图el，所以让我们看一下：

var print = Backbone.View.extend({
    el : $('ul li.newItem'),
    //...

当它Backbone.View.extend运行时，DOM 中不会有任何li.newItem元素，因此您不会el在该视图中获得有用的信息。这里通常的方法是有一个看起来像这样的视图：

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

我们设置tagName并'li'让 Backbone<li>自己创建。然后我们将计数器值Print作为参数传递给视图，this.options.i当我们说new Print({ i: ... }).

现在我们只需要调整addItem你的方法ListView来创建新Print的并将它们添加到<ul>：

addItem: function(){
    this.counter++;
    var v = new Print({ i: this.counter });
    this.$('ul').append(v.render().el);
}

更新演示：http: //jsbin.com/evoqef/10/edit

我还进行了一些其他更改：

  1. 使用this.$el而不是$(this.el)，无需创建已经可用的东西。
  2. 使用this.$()而不是$('ul', this.el)，相同的结果，但this.$()不会在$()函数调用结束时隐藏上下文，并且this.$()在 Backbone 中更惯用。
于 2012-09-04T06:11:26.757 回答
0

在你的_.bind(printText, this);

printText超出了 init 函数的范围。this因为您的第二个参数代表打印 Backbone.View。

你可以这样做：

_.bind(this.printText, this);

并可能摆脱init()错误。但是您可以this在 printText 内部使用，它无论如何都会代表您的视图。

printText: function() {
    console.log(this);  // this represents your view
}
于 2012-09-04T05:53:55.213 回答