Backbone.js引用集合和視圖的應用程序方法

Question

我正在研究相當大的客戶端Backone應用程序，它通過$.getJSON方法獲取配置，並基於它創建模型，集合和視圖。

start: function() { 
    var that = this; 
    $.getJSON(this._source, function(data) { 
     appController.createEx(data, that._destination); 
    }); 
} 

比，我有文件controller.js，即基於配置，創建模型，視圖和集合。 所以，我已經有了一個地圖

var map = { 
    'ex1': { 
     'collection': CollectionOne, 
     'View': ViewOne 
    } 
} 

，然後，我創建在此基礎上設置一個新的集合和視圖，例如

var myCollection = new type.collection([], config); 

這類型會更多，並能更具體一些，例如一種類型的測驗可能包含兩個集合。

該控制器是RequireJS模塊之一，但我正在考慮很多關於這個項目的架構。主要是，我想知道這是一個很好的做法，以及如何做到這一點，以引用另一個對象，例如從視圖到兩個集合。

一種方法，將返回所有的對象這樣從這個controller.js在恩和要求它從另一個文件，只是參考了一些對象 - 這樣

return { 
    myCollection: myCollection, 
    myView: myView 
} 

這是很好的做法，或者我應該通過引用beetweens模型，所以例如我將有一個視圖，其中將包含兩個集合，這將創建時引用？

var myView = new type.collection({ 
    collection: myCollection, 
    collectionTwo: mySecondCollection 
}); 

我在設計Backbone應用程序方面沒有很大的經驗，特別是在使用requireJS時。 在Backbone TodoMCV教程中，他們舉例創建集合，然後在視圖中引用它們，但是在某個命名空間中有 - 並且帶有require.js，我不知道那個包含很多代碼的require('controller.js')，會很好或者我現在應該做一些設計改進，以便更有前途的證明，屆時將會有更多類型的quizez /遊戲處理。

您認爲如何？如果您有任何構建應用程序的示例，並且需要在多個集合和視圖之間存在某種關係，我會非常高興。

謝謝！

編輯：更確切地說，這裏是這種情況的一個例子。

我有兩個集合（保持平坦，我需要兩個） - 一個與身體內容，另一個與答案。 在Backbone.View中，我需要引用兩者 - 一個是用戶可見的，另一個需要驗證第一個。我不知道在創建時，我應該通過這個集合的觀點，或加載某些需要模塊containes

var mySecondCollection = new SecondCollection(content); 
return { 
    mySecondCollection: mySecondCollection 
} 

在視圖

和參考，這樣：

mySecondCollection.get(id); 

雙方應該工作，但哪種方法更優雅？

Answer 1

這是我現在正在進行的工作。我現在正在使用node.js作爲開發依賴項，並使用node-browserify和uglifyjs2創建客戶端代碼的單個文件包。作爲獎勵，您可以將配置直接編譯到軟件包中，而無需使用$.getJSON並在客戶端的瀏覽器上進行配置。

---

你的文件結構可能是這樣

• MYAPP/
  • 編譯/
    • 目錄爲您的捆綁應用
  • 客戶端/
    • 收藏/
      • 富-collection.js
    • 型號/
      • foo.js
    • 路由器/
      • FOO-router.js
    • 視圖/
      • APP-view.js
    • main.js

---

小設置

$ cd myapp 
$ npm init 
# fill out prompts 
$ npm install --save-dev jquery backbone browserify uglify-js 

---

現在讓我們來看看代碼是什麼樣子

客戶端/ main.js

這個文件來初始化應用

var Foo   = require("./models/foo"), 
    FooCollection = require("./collections/foo-collection"), 
    FooRouter  = require("./routers/foo-router"); 
    AppView  = require("./views/app-view"); 

(function() { 
    var foos = new FoosCollection([], {model: Foo}); 
    var router = new FooRouter(foos); 
    var view = new AppView({collection: foos}); 

    document.body.appendChild(view.render().el); 
    Backbone.history.start(); 
})(); 

客戶機/模型/ foo.js

var $  = require("jquery"), 
    Backbone = require("backbone"); 

Backbone.$ = $; 

var Foo = Backbone.Model.extend({ 
    // ... 
}); 

module.exports = Foo; 

客戶端/收藏/ foo中。JS

var $  = require("jquery"), 
    Backbone = require("backbone"), 
    Foo  = require("../models/foo"); 

Backbone.$ = $; 

var FooCollection = Backbone.Collection.extend({ 
    // ... 
}); 

module.exports = FooCollection; 

---

您可以繼續編寫應用這種方式，只是包括所有independencies，你會在一個正常節點的應用程序。

當它的時間來建立

$ browserify client/main.js | ugilfy-js -m -c > build/app.min.js 

---

或者你也可以做一個基於環境的構建。

安裝在你的myapp /的package.json一個script

{ 
    "scripts": { 
    "build": "NODE_ENV=production browserify client/main.js | uglifyjs -m -c > build/app.min.js", 
    "build-dev": "NODE_ENV=development browserify -d client/main.js | uglifyjs > build/app.js" 
    } 
} 

建立生產

$ npm run-script build 

建立發展

$ npm run-script build-dev 

無論應用程序是配置，只是它包括prope r配置基於process.env.NODE_ENV || "development"