たぶん、ただのばかげた質問です。
すべての例で、ビュー モデルとコレクションがグローバル変数であることを確認しました。
ここに例があります。バックボーン入門.
グローバル変数や名前空間を使用せずにモデル ビューとコレクションを定義することは可能ですか?
そして、どうすればそれらにアクセスできますか?
2 に答える
モデルとコレクション (およびそれぞれのインスタンス) は、好きな場所に定義できます。再利用のためだけに、モデルなどにある種のグローバル名前空間規則をお勧めします。これを行う簡単な方法は次のとおりです。
window.ProjectModels = window.ProjectModels || {}; //use existing namespace or create a new one.
ProjectModels.SomeModel = Backbone.Model.extend({ ...});
ProjectModels.SomeOtherModel = Backbone.Model.extend({ ...});
ProjectModels.SomeRelatedModel = ProjectModels.SomeModel.extend({ ...});
...
window.ProjectViews = window.ProjectViews || {}; //use existing namespace or create a new one.
ProjectViews.SomeModelView = Backbone.View.extend({ ...});
ProjectViews.SomeOtherModelView = Backbone.View.extend({ ...});
ProjectViews.SomeRelatedModelView = ProjectViews.SomeModel.extend({ ...});
コレクションを独自の名前空間に入れなかった理由を不思議に思うかもしれません。コレクションを独自の名前空間に配置していない唯一の理由は、Backbone.Model をある種の階層的なコレクション/ものに拡張する可能性がある場合があるためです。また、コレクションとコレクションの命名規則があるため、モデルとコレクションを区別することもできます [何か]コレクション.
@JayCは実際にはグローバル名前空間について正しく、ある種の名前空間規則がありますが、実際にはバックボーンクラスごとに個別のモジュールを使用し、後で1つを使用してロードするのが好きです(または、あなたが何であるかを知っている場合は何も使用しません)している)名前空間。CommonJS を使用したグローバル変数のないアプリケーションの例を示します (実際には、 RequireJS を使用してそれを作成するためのかなり優れたリソースがあります)。
必要なのは、非常にシンプルでこのgistのような追加のライブラリです。基本的に、個別のファイルまたは縮小されたファイル( script.js ファイルなど)に使用できる CommonJS 仕様を提供します。
、、、という名前の 4 つのファイルがあり、次model.js
のcollection.js
ようview.js
にapp.js
なっているとします。
// model.js
this.require.define({'model.js': function(exports, require, module) {(function() {
var MyModel = Backbone.Model.extend({
...
});
module.exports = MyModel;
}).call(this)}});
// collection.js
this.require.define({'collection.js': function(exports, require, module) {(function() {
var MyCollection = Backbone.Collection.extend({
model : require('model.js');
});
module.exports = MyCollection;
}).call(this)}});
// view.js
this.require.define({'view.js': function(exports, require, module) {(function() {
var MyView = Backbone.View.extend({
initialize: function() {
var Collection = require('collection.js');
this.collection = new Collection();
}
});
module.exports = MyView;
}).call(this)}});
// app.js
this.require.define({'app.js': function(exports, require, module) {(function() {
var View = require('view.js');
$(function() {
new View();
});
}).call(this)}});
HTML ファイルのスクリプト タグは次のようになります。
<script src='jquery-underscore-backbone.js'></script>
<script src='commonjs.js'></script> <!-- this is the library from the gist -->
<script src='model.js'></script>
<script src='collection.js'></script>
<script src='view.js'></script>
<script src='app.js'></script>
すべてのファイルを縮小し、それらすべてのファイルの縮小されたコンテンツを含む 1 つだけ (たとえば script.js ) をロードすることもできます。
これを行うことで、グローバルな名前空間の人口がなくなり、 no App.Class
、 no App.Collection
... などになります。何をしているのかがはっきりしている場合は、window.app
変数を持つ必要さえありません。
ラッパーのせいで見栄えが悪いことはわかっていますが、これを自動的にラップするフレームワークがあります。または、AJAX モジュールの読み込み ( requireJS ) を使用する場合は、このラッピング関数を使用する必要はありません。
これの良い例(node.js)は次のとおりです:Stich