Магистральные Просмотров как модули CommonJS

Question

Я пытаюсь получить мою голову вокруг использования CommonJS модулей в приложении Backbone, поэтому у меня есть скелет Backbone вид, определенный в /views/categories/edit.js:

app.Views.quoteCategoriesEdit = app.Ui.ModalView.extend({ 

    className: '', 

    template: JST["templates/quotes/categories/quote-categories-edit.html"], 
    events: { 
     'click [data-key="save"]': 'save', 
     'click [data-key="cancel"]': 'cancel' 
    }, 
    initialize: function (options) { 
     var that = this; 
     _.bindAll(this, 'save', 'cancel'); 
     app.Collections.quotesCategories.on('change add', function() { 
      that.remove(); 
     }); 
    }, 

    render: function() { 
     var that = this; 
     // boilerplate render code 
     return this; 
    } 

}); 

Если кто-то может показать мне, как я может преобразовать это в модуль CommonJS, который будет использоваться с Browserify, тогда я был бы очень благодарен, и это действительно помогло бы мне понять, как я собираюсь модулировать остальную часть приложения! Благодаря

Answer 1

//once you get things into folders/files, this path may change 
//but for now I'm assuming all your views will live in the same directory 
var ModalView = require('./modal-view'); 

var QuoteCategoriesEdit = ModalView.extend({ 

    className: '', 

    template: JST["templates/quotes/categories/quote-categories-edit.html"], 
    events: { 
     'click [data-key="save"]': 'save', 
     'click [data-key="cancel"]': 'cancel' 
    }, 
    initialize: function (options) { 
     var that = this; 
     _.bindAll(this, 'save', 'cancel'); 
     app.Collections.quotesCategories.on('change add', function() { 
      that.remove(); 
     }); 
    }, 

    render: function() { 
     var that = this; 
     // boilerplate render code 
     return this; 
    } 

}); 
//Simplest convention is just 1-class-per-module 
//Just export the constructor function 
module.exports = QuoteCategoriesEdit; 

последующий вопрос из комментариев:

Очень ценю это! Как вы подходите: app.Collections.quotesCategories, когда я размещаю все под пространством имен приложений? Мне просто нужна сама коллекция?

Таким образом, идея пространства имен «приложение» противоположна модульной/commonjs/browsify/requirejs. Вам больше не нужен объект app. Любой модуль, который должен создать новый экземпляр этой коллекции, просто сделает var QuotesCategories = require('app/collections/quotes-categories');, и это все. Больше глобальных объектов или объектов пространства имен. В основном ваши взгляды получат модели/коллекции, которые им нужны в их конструкторской функции options. Большинство ваших моделей создадут, вызвав fetch в коллекции, и большинство ваших коллекций будут созданы вашим маршрутизатором.

О, и да в этом конкретном примере, вероятно, лучше, если код не-просмотра создает коллекцию и передает ее в представление через конструктор options.collection. Однако, если вы решили, что вы действительно хотите, чтобы ваше представление создавало экземпляр коллекции, оно не было бы связано с глобальным пространством имен app, оно просто было бы вызвано вызовом require, как вы описали в своем комментарии.