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作業を妨げている 2 つの問題があります。

  1. printText対象外です。
  2. _.bindそして_.bindAll違う振る舞いをします。

this.printText最初のものは修正が簡単で、 だけでなくを使用したいprintText。

_.bind単一の関数を a にバインドし、そのバインドされた関数thisを返します。_.bindAll一方、 は、いくつかの名前付き関数を にthisバインドし、バインドされた関数を指定された にアタッチしたままにしますthis。したがって、これを行う：

_.bind(printText, this);

バインドされた関数を破棄しているため、何も役に立ちません。あなたはこれをしたいでしょう：

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

または、より一般的にバックボーン アプリでは、次を使用します_.bindAll。

_.bindAll(this, 'printText');

これで機能が整い、内部initializeが正しくなり、修正に進むことができます。クリックされた からテキストを抽出したいと思います。あなたはこのようにこれを行うことができます:thisprintTextprintText<li>

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

しかし、それはまだ機能せず、ここで何が起こっているのか疑問に思っています. バックボーンはイベントをビューにバインドする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引数としてビューに渡します。Backbone は、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.$()
于 2012-09-04T06:11:26.757 に答える
0

あなたの_.bind(printText, this);

はprintTextinit 関数の範囲外です。this2 番目の引数は、印刷の Backbone.View を表すためです。

次のようなことができます。

_.bind(this.printText, this);

そしておそらくinit()エラーを取り除きます。ただし、printText の内部で使用することもできますがthis、とにかくビューを表します。

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