0

我正在编写一个应用程序，该应用程序将由具有不同经验的团队扩展，因此我试图限制 Backbone 的灵活性，以便提供一种一致的方式来构建我们的代码。为此，我编写了一个简单的外观，将类和实例隐藏在 get/set 函数后面，因此类/实例不会被无意覆盖，我们使用本地变量和全局变量，我们的代码更漂亮，维护更少.

到目前为止，我的原型代码运行良好，但有一个例外——在子类视图中，“事件”属性不是委托事件。如果你看到什么坏了，我将不胜感激！如果您知道组织代码以达到相同目的的更好方法，我也愿意！

谢谢！

运行在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')
});
4

2 回答 2

1

如果没有 jsfiddle 中的工作示例或类似的东西，这很难诊断，但你确定你不想要这个......

Klass = (classes[classObj.extendsClass]||Backbone[type]).extend(classObj);

……变成这样？……

Klass = (

  classes[ classObj.extendsClass ] || Backbone[ type ]

).extend( classObj );
于 2012-04-30T23:03:45.963 回答
0

不要忘记将您的实例创建放在 $(document).ready() 调用中，否则 getElementById() 调用中的元素将不存在。

嗬！

于 2012-05-01T00:33:06.610 回答