實現骨幹

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是進一步調試所必需的。