さまざまな経験を持つチームによって拡張されるアプリを作成しているので、コードを構造化する一貫した方法を提供するために Backbone の柔軟性を制限しようとしています。そのために、get/set 関数の背後にあるクラスとインスタンスを隠す単純なファサードを作成して、クラス/インスタンスが意図せずに上書きされないようにしました。ローカル変数とグローバル変数を使用し、コードはきれいに保たれ、メンテナンスが少なくなります。 .
私のプロトタイプ コードは、これまでのところ 1 つの例外を除いて問題なく動作しています。サブクラス化されたビューでは、"events" プロパティはイベントを委譲していません。何が壊れているか見ていただければ幸いです。同じ目的を達成するためにコードを整理するより良い方法を知っているなら、私もそれを受け入れます!
ありがとう！
http://jiggler.media.mit.edu:8008/projects/2147302/?mode=playerで実行されているコードの一時的な例と、http: //jiggler.media.mit.edu/adamのサブクラス化されたビュー/scratchr2/static/js/project.js . 実行中のコードには関連のないものがかなりの量含まれているため、関連するロジックを以下に抜粋しました。
実行中のバックボーン 0.9.2、アンダースコア 1.3.3、および jQuery 1.7.1
// Facade factory - creates an interface for working with views
window.scratch={};
scratch.createBackboneManager=function(type,optionsObj){
if (!type || !Backbone[type]) throw 'type required to add a backbone type (e.g., Model, View) to scratch';
if(scratch[type]) throw 'scratch.'+type+' already exists';
scratch[type]=(function(){
var classes={};
function create(name,classObj){
if (classes[name]) throw type+' '+ name + ' already exists.';
if (name[0].toUpperCase()!==name[0]) throw type+' names must be upper case. "'+name+'" starts lower case.';
return classes[name]=(function(){
var instances={},
Klass = (classes[classObj.extendsClass]||Backbone[type]).extend(classObj);
function createInstance(name,options){
if (instances[name]) throw 'Instance '+ name + ' already exists';
if (name[0].toLowerCase()!==name[0]) throw 'Instance names must be upper case. "'+name+'" starts upper case.';
return instances[name]=new Klass(options);
};
function getInstance(name){
return instances[name];
};
return $.extend(Klass,{getInstance:getInstance,createInstance:createInstance}) // return the Class with simple instance management methods.
})();
};
function get(name){
return classes[name]||undefined;
};
return $.extend({create:create,get:get},optionsObj);
})();
};
// create managers
scratch.createBackboneManager('View');
scratch.createBackboneManager('Model');
// create a model
scratch.Model.create('Project',{
defaults: {// current project
owner: null, // instance of user?
parentId: null,
title: 'Untitled',
isPrivate: false,
}
}).createInstance('project',{
owner: 'foo',
viewing_user:'bar',
title:'baz',
id: '12345',
});
// create a view
scratch.View.create('Global_UI',{
initialize:function(){
var self=this;
$(document).ready(function(){self.render()});
},
}).createInstance('global_ui');
// subclass the view and add events
scratch.View.create('Showcase',{
extendsClass:'Global_UI',
events: {
"mouseover .see-inside" : 'alertSee',
},
alertSee:function(e){alert(e)},
}).createInstance('showcase',{
el:document.getElementById('project'),
model:scratch.Model.get('Project').getInstance('project')
});