2

click()以下のコード スニペットに示すように、バックボーン コレクションといくつかのビューが return 関数で作成されます。

問題:productList Javascript コンソールを使用して Collection のような backbone.js オブジェクトにアクセスするにはどうすればよいですか? this.productList何も返さないのでproductList、オブジェクトの直接の子ではないと思いwindowます。では、どのようにproductListコレクションを作成すればよいでしょうか?

JS コード

$('#submit_btn').click(function() {
        console.log('do something');
    }, function() {

        this.productList = new ProductCollection();
        var self = this;
        self.productListView = new ProductListView({ collection: self.productList });
        this.productList.fetch({
            data: {gender: 'men'},
            processData: true
        });

    });
});
4

2 に答える 2

2

この場合、すべてを匿名関数に入れることはできないため、関数の実行後にアクセスすることはできません。とにかく、これは物事を行う正しい方法ではなく、バックボーンの方法でもありません。

これは、私が一般的に行う方法であり、アプリのような中央の名前空間を作成し、その名前空間にすべてのモデル、コレクション、およびビューを次のように作成します。

window.App = {
   //model
   Curve : {},
   //collection
   CurveManager : {},
   //view
   Views : {},
   //controller
   Controller : {}
}

さらに、バックボーンビュー自体からクリックイベントを処理する必要があると思います。そうすれば、物事を視覚化するのが比較的簡単になります。たとえば、http: //backbonejs.org/docs/todos.html で AppView イベントを見てください。それは物事をより明確にするはずです。

ここにコードのその部分があります

var AppView = Backbone.View.extend({
    el: $("#todoapp"),
    statsTemplate: _.template($('#stats-template').html()),
    events: {
      "keypress #new-todo":  "createOnEnter",
      "click #clear-completed": "clearCompleted",
      "click #toggle-all": "toggleAllComplete"
    },

    .
    . // more code in between
    .

    createOnEnter: function(e) {
      if (e.keyCode != 13) return;
      if (!this.input.val()) return;

      Todos.create({title: this.input.val()});
      this.input.val('');
    },

私は通常、github で他の人のコードを見て、彼らがどのように物事を行うか、どのように行うべきかを学ぼうとします。あなたも同じことをすることをお勧めします。とても役に立ちます :) todoapp の注釈付きソースは非常にクリーンで、非常に理解しやすいものです。

于 2012-08-31T15:50:14.913 に答える
0

productList をwindowオブジェクトに添付できます。

$('#submit_btn').click(function() {
        console.log('do something');
    }, function() {

        window.productList = new ProductCollection();
        var self = this;
        self.productListView = new ProductListView({ collection: self.productList });
        window.productList.fetch({
            data: {gender: 'men'},
            processData: true
        });

    });
});

submit_btnただし、@avkがバックボーン ビューの一部であると言ったように、コードをリファクタリングしたほうがよいでしょう。

何が起こっているかに関係なく、thisそのインスタンスではコードが実行されているクロージャーを参照するため、外部から利用可能なオブジェクトにエクスポートするまでアクセスできません。

于 2012-08-31T15:54:25.443 に答える