Backbone.js: как вызывать методы для коллекции внутри литерала объекта - PullRequest
Новая
       15

Backbone.js: как вызывать методы для коллекции внутри литерала объекта

1 голос
/ 14 августа 2011

У меня есть следующий код 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, потому что хочу автоматически проверить / создать / сохранить модель, и это кажется самым простым вещь которую нужно сделать). Я новичок с глубоким позвоночником (это мой «привет мир»)

Спасибо

Ответы [ 2 ]

2 голосов
/ 15 августа 2011

Я думаю, что главная проблема в том, что вы воспринимаете 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 может сделать код немного понятнее.

0 голосов
/ 16 августа 2011

Вам нужно инициализировать коллекцию перед созданием нового экземпляра модели 

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

    !collection.create && (collection = new collection);
    collection.create({
        name: $('#name').val()
    });
}
...