1

次の backbone.js コードがあります。コードを整理するためにオブジェクト リテラルを使用していますが、最善の方法について疑問が残りました。アプリケーション (以下の簡略化された形式) には、コレクションに新しいカテゴリを追加するために使用されるコントロール パネル (表示または非表示にできます) があります。（質問が続きます）

(function($){

    // ============================= NAMESPACE ========================================
var categoryManager = categoryManager || {};

    // ============================= APPLICATION =================================================

categoryManager.app = categoryManager.app || {

    /* Used to Initialise application*/
    init: function(){
        //this.addView = new this.addCategoryView({el: $("#add-new-category")})
        //this.collection = new this.categoryCollection();
        new this.addCategoryView({el: $("#add-new-category")})
        new this.categoryCollection();
    },

    categoryModel:  Backbone.Model.extend({
        name: null
    }),

    addCategoryView: Backbone.View.extend({

        events: {
            "click #add-new-category-button.add" : "showPanel",
            "click #add-new-category-button.cancel" : "hidePanel",
            "click #new-category-save-category" : "addCategory"
        },
        showPanel: function() {
            $('#add-new-category-button').toggleClass('add').toggleClass('cancel');
            $('#add-new-category-panel').slideDown('fast');
        },
        hidePanel: function() {
            $('#add-new-category-button').toggleClass('add').toggleClass('cancel');
            $('#add-new-category-panel').stop().slideUp('fast');
        },
        addCategory: function() {
            //categoryManager.app.collection.create({
            categoryManager.app.categoryCollection.create({ // My Problem is with this line
                name: $('#name').val()
            });
        }
    }),

    categoryCollection: Backbone.Collection.extend({
        model: this.categoryModel,
        initialize: function () {

        }
    })
}
    // ============================= END APPLICATION =============================================

    /* init Backbone */

    categoryManager.app.init();

})(jQuery);

明らかに上記の問題は、 addCategory 関数を呼び出すと、初期化されていないオブジェクトの関数を呼び出そうとすることです。init 関数内でインスタンス化されたオブジェクトに対して代わりに関数を呼び出すことで、問題を回避しました (コメントアウトされたコードを参照) 。私の質問は - これは正しいことですか? コードの匂いを感知。オブジェクト リテラルの内容が有効であるためには、作成されるオブジェクトに依存するべきではないと思います。このインスタンスの関数 addCategory は、最初に親で init 関数が呼び出されていない限り機能しません。ここで使用する必要がある別のパターンはありますか?

「新しいカテゴリフォームの作成」のコンテンツをコレクションに渡して追加するにはどうすればよいですか (モデルを自動的に検証/作成/永続化したいので create を使用しています。これが最も簡単な方法のようです) ）。私はバックボーンを持ったどん底の初心者です (これが私の 'Hello World' です)

ありがとう

4

2 に答える 2

0

モデルの新しいインスタンスを作成する前に、コレクションを初期化する必要があります

addCategory: function() {
    var collection = categoryManager.app.categoryCollection;

    !collection.create && (collection = new collection);
    collection.create({
        name: $('#name').val()
    });
}
于 2011-08-16T09:37:28.880 に答える