实现骨干

Question

一个memoize的风格模块装载机从此开始重组我的主干应用程序通过Bocoup引用这篇文章：http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules

我无法初始化意见模块中定义。

看到这个的jsfiddle：http://jsfiddle.net/nicksergeant/8L6JX/

我的application.js：

// Memoizing technique from http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules 
var sidepros = { 
    // Create this closure to contain the cached modules 
    module: function() { 
     // Internal module cache. 
     var modules = {}; 

     // Create a new module reference scaffold or load an 
     // existing module. 
     return function(name) { 
      // If this module has already been created, return it. 
      if (modules[name]) { 
       return modules[name]; 
      } 

      // Create a module and save it under this name 
      return modules[name] = { Views: {} }; 
     }; 
    }() 
}; 

// Using the jQuery ready event is excellent for ensuring all 
// code has been downloaded and evaluated and is ready to be 
// initialized. Treat this as your single entry point into the 
// application. 
jQuery(function($) { 

    if ($('body').hasClass('apply')) { 
     sidepros.app = new sidepros.module('apply').Views.AppView(); 
    } 

}); 

模块，apply.js：

(function(Apply) { 

    App = sidepros.app; 

    Apply.FieldModel = Backbone.Model.extend({ 
     group: null 
    }); 
    FieldView = Backbone.View.extend({ 
     initialize: function() { 
      this.model = new FieldModel({ 
       group: $(this.el).parents('div.group').attr('id') 
      }); 
      this.model.view = this; 

      this.$tooltip = $('div.tooltip', $('#' + this.model.get('group'))); 
     }, 
     events: { 
      'focus': 'focused', 
      'blur' : 'blurred', 
      'keyup': 'updateTooltip' 
     }, 
     focused: function() { 
      App.$tooltips.hide(); 
      this.$tooltip.show(); 
     }, 
     blurred: function() { 
      App.$tooltips.hide(); 
     }, 
     updateTooltip: function() { 
      if (this.model.get('group') == 'name') { 
       short_name = $.trim(App.$first_name.val() + ' ' + App.$last_name.val().charAt(0)); 
       if (short_name !== '') { 
        short_name = ': ' + short_name; 
       } 
       App.$name_preview.text($.trim(short_name)); 
      } 
     } 
    }); 

    AppView = Backbone.View.extend({ 
     el: '#app', 

     initialize: function(opts) { 
      $('input, select, textarea', this.el).each(this.addField); 

      this.$first_name = $('input#id_first_name', this.el); 
      this.$last_name = $('input#id_last_name', this.el); 
      this.$name_preview = $('strong#name-preview', this.el); 
      this.$tooltips  = $('div.tooltip', this.el); 
     }, 
     addField: function() { 
      model = new FieldView({ el: this }); 
     } 
    }); 

    Apply.Views = { 
     'AppView': AppView, 
     'FieldView': FieldView 
    }; 

})(sidepros.module('apply')); 

当试图给init APPVIEW像这样：

sidepros.app = new sidepros.module('apply').Views.AppView(); 

我得到的错误：

Uncaught TypeError: Object #<Object> has no method '_configure' 

Answer 1

，因为JavaScript是弄不清你的构造函数的情况下你得到这个错误。如果您进入AppView构造函数，则上下文为Apply.Views，这意味着new运算符尚未被调用。

要摆脱那种错误的，你需要做以下之一：

var appView = sidepros.module('apply').Views.AppView; 
    sidepros.app = new appView(); 

OR

sidepros.app = new (sidepros.module('apply').Views.AppView)(); 

除此之外，我不完全知道你正在尝试做的。在你的jsFiddle中没有input,select或textarea节点，所以我不能确定你的下一个问题是什么。

另外，这条线model = new FieldView({ el: this }):对我来说真的很奇怪。为什么在addField函数中将模型设置为您的视图？

我认为一个新的jsFiddle是进一步调试所必需的。