骨幹視圖作爲CommonJS的模塊

Question

我試圖讓我的頭周圍採用主幹應用程序中CommonJS的模塊，所以我必須在/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; 
    } 

}); 

如果有人能告訴我如何我可以將它轉換成與Browserify一起使用的CommonJS模塊，那麼我會非常感激，它會幫助我理解我如何去模塊化應用程序的其餘部分！從評論感謝

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，因爲我把應用程序命名空間下的所有東西都放在了一起？我只需要收集本身？

所以「app」命名空間的概念與模塊化/ commonjs/browserify/requirejs相反。你不再需要一個app對象。任何需要創建這個集合的新實例的模塊只需要做var QuotesCategories = require('app/collections/quotes-categories');即可。沒有更多的全局或命名空間對象。大多數情況下，您的視圖將在構造函數options中獲得他們需要的模型/集合。大多數模型將通過在集合上調用fetch而創建，並且大多數集合將由您的路由器實例化。

哦，是的，在這個特定的例子中，最好是非視圖代碼創建集合並通過構造函數options.collection將其傳遞給視圖。但是，如果您確定是的，您確實希望您的視圖實例化集合，它不會來自全局名稱空間對象，它只會來自require調用，如您在評論中所述。