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 函数中实例化的对象上调用该函数来解决问题（请参阅注释掉的代码） 。我的问题是 - 这是正确的做法吗？我检测到代码气味。我觉得对象文字的内容不应该依赖于被创建的对象才能有效。除非首先在父级上调用了 init 函数，否则此实例中的函数 addCategory 将不起作用。我应该使用另一种模式吗？

我如何将“创建新类别表单”的内容传递给集合以便添加（我使用创建是因为我想自动验证/创建/持久化模型，这似乎是最简单的事情）。我是一个有骨气的底层新手（这是我的“你好世界”）

谢谢

4

2 回答 2

2

我认为主要问题是您将categoryCollection其视为对象。它不是真正的对象，而是构造函数。因此，正如您所发现的，首先您需要创建一个实例。

然后addCategoryView需要某种引用实例的方式。看起来您没有与视图关联的模型。我建议创建一个模型并将categoryCollection实例存储为模型的属性。像这样的东西（警告，未经测试的代码）：

var model = new BackBone.Model({
    categories: new categoryManager.app.CategoryCollection()
});

var view = new categoryManager.app.AddCategoryView({
    el: $("#add-new-category"),
    model: model
});

然后你可以this.model.categories从里面使用addCategoryView。

顺便说一句，常见的 Javascript 约定是将构造函数的名称大写。调用构造函数CategoryCollection可能会使代码更清晰一些。

于 2011-08-15T19:43:31.733 回答
0

您需要在创建模型的新实例之前初始化集合

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

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