未捕獲類型錯誤：視圖不是構造函數

Question

我有未捕獲類型錯誤：UserRegisterView不是構造函數。我不明白這個錯誤。我查看了所有的代碼，但是我沒有找到它。 對不起我的壞english.Please的幫我

謝謝回答

修訂

UserRegisterView在這裏

var UserRegisterView = Backbone.View.extend({ 

    model: User, 
    el: '#form', 
    events: { 
     'click input[id="infoWeek"]': 'infoWeek', 
     'click input[id="infoMonth"]': 'infoMonth' 
    }, 

    infoWeek: function() { 

     this.$el.find("#dayOfMonth").hide(); 
     this.render(); 
    }, 

    infoMonth: function() { 

     this.$el.find("#dayOfWeek").hide(); 
     this.render(); 

    } 
}); 

var AddUserView = Backbone.View.extend({ 
    el: $(".page"), 
    events: { 
     'click #saveUser': 'saveUser' 
    }, 
    saveUser: function() { 
     var user = new User(); 
     user.set({ 
      username: $("#username").val(), 
      lastName: $("#lastName").val(), 
      regNumber: $("#regNumber").val(), 
      password: $("#password").val(), 
      departmentName: $("#departmentName").val(), 
      email: $("#email").val(), 
      role: $("#role").val() 
     }); 
     user.save(); 

     if (document.getElementById('isOpen').checked) { 
      user.set("isOpen", $("#isOpen").val("1")); 
      user.save(); 
     } else { 
      user.set("isOpen", $("#isOpen").val("0")); 
      user.save(); 
     } 

     if (document.getElementById('dayOfWeek').checked) { 
      user.set("dayOfWeek", $("#dayOfWeek").val()); 
      user.save(); 
     } else if (document.getElementById('dayOfMonth').checked) { 
      user.set("dayOfMonth", $("#dayOfMonth").val()); 
      user.save(); 
     } 


     $("#username").val(""); 
     $("#firstName").val(""); 
     $("#lastName").val(""); 
     $("#regNumber").val(""); 
     $("#password").val(""); 
     $("#deparmentName").val(""); 
     $("#email").val(""); 
     $("#isOpen").val(""); 
     $("#dayOfWeek").val(""); 
     $("#dayOfMonth").val(""); 
    }, 

    render: function() { 
     var that = this; 
     var template = Handlebars.compile(UserRegister); 
     var myHtml = template(that.model.toJSON()); 
     that.$el.html(myHtml); 
     return this; 
    } 
}); 

return { 
    AddUserView: AddUserView, 
    UserRegisterView: UserRegisterView 
}; 

}); 

路由器用戶FUNC。在util.js中

function disposeView(view) { 
    Backbone.View.prototype.close = function() { 
     this.unbind(); 
     this.undelegateEvents(); 
    }; 

    /* Şu anki viewi yok et */ 
    if (this.currentView !== undefined) { 
     this.currentView.close(); 
    } 

    /* Yeni view oluştur. */ 
    this.currentView = view; 
    this.currentView.delegateEvents(); 

    return this.currentView; 
} 

Answer 1

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'handlebars', 
    'spin', 
    'app/models/LoginModel', 
    'app/views/LoginView', 
    'app/views/UserRegisterView' 
], function($, 
    _, 
    Backbone, 
    Handlebars, 
    Spinner, 
    Login, 
    LoginView, 
    UserRegisterView 
) { 

    var Router = Backbone.Router.extend({ 
     routes: { 
      'search': 'search', 
      'login': 'login', 
      'travels': 'travels', 
      'user': 'user', 
      'menu': 'menu', 
      '': 'home' 

     }, 
     user: function() { 

      disposeView(new UserRegisterView().render()); 

     } 

dispose.view發生了什麼事

你UserRegisterView模塊返回一個包含兩個構造函數的對象。

return { 
    AddUserView: AddUserView, 
    UserRegisterView: UserRegisterView 
}; 

當使用這個模塊時，你得到的是上面的對象。

define([ 
    // ... 
    'app/views/UserRegisterView' 
], function(
    // ... 
    UserRegisterView // value of the return in the module 
) { 

所以你通過調用它UserRegisterView因爲它不是構造函數，但含有構造函數的對象是那種誤導自己。

要獲得一個新的UserRegisterView視圖實例與當前這樣你的模塊的設置，你需要調用它像這樣：

var userView = new UserRegisterView.UserRegisterView(); 

或者要創建AddUserView實例：

var addView = new UserRegisterView.AddUserView(); 

解決方案

• 拆分模塊，每個視圖構造函數一個。
• 更改名稱，所以至少它不是誤導（如UserViewsModule）

---

其他改進

話雖這麼說，有可能你的骨幹代碼進行其他方面的改進。

var UserRegisterView = Backbone.View.extend({ 
    // that's useless (if not used) and not a view property. 
    // model: User, 

    // don't use `el` like that, especially when using the view as a shared Constructor 
    el: '#form', 
    events: { 
     'click input[id="infoWeek"]': 'onInfoWeekClick', 
     'click input[id="infoMonth"]': 'onInfoMonthClick' 
    }, 

    initialize: function() { 
     // Cache jQuery object of the view's element 
     this.$dayOfMonth = this.$("#dayOfMonth"); 
     this.$dayOfMonth = this.$("#dayOfMonth"); 
     // also use the shortcut function instead of `this.$el.find()` 
    } 

    onInfoWeekClick: function(e) { 
     this.$dayOfMonth.hide(); 
     // calling render here is useless unless your using it as a parent 
     // view, where the child view overrides the render function. 
    }, 

    onInfoMonthClick: function(e) { 
     this.$dayOfMonth.hide(); 
    } 
}); 

的disposeView功能可以簡化：

function disposeView(view) { 
    var current = this.currentView; 
    if (current) current.close(); 
    current = this.currentView = view; 
    current.delegateEvents(); 
    return current; 
} 

每個函數被調用時不要更改默認的骨幹視圖的原型。相反，添加一次該功能。

_.extend(Backbone.View.prototype, { 
    close: function() { 
     this.unbind(); 
     this.undelegateEvents(); 
    }, 
    // any other function you want to add can go here. 
}); 

在另一個答案，我詳談上how to extend Backbone's core classes with requirejs transparently。

你已經在使用jQuery，所以不要使用JavaScript DOM API document.getElementById('isOpen')穿插jQuery選擇器$('#isOpen')。

我對以下視圖做了一些改進。花時間創建一些實用功能（如reset和getValues），以簡化代碼流並封裝複雜性。

var AddUserView = Backbone.View.extend({ 
    el: $(".page"), 
    events: { 
     'click #saveUser': 'saveUser' 
    }, 
    // compile the template once while creating the view class 
    template: Handlebars.compile(UserRegister), 

    // get the selector string out of the code and place them in one place 
    // easy to change and maintain. 
    fields: { 
     username: "#username", 
     firstName: "#firstName", 
     lastName: "#lastName", 
     regNumber: "#regNumber", 
     password: "#password", 
     deparmentName: "#deparmentName", 
     email: "#email", 
     isOpen: "#isOpen", 
     dayOfWeek: "#dayOfWeek", 
     dayOfMonth: "#dayOfMonth", 
    }, 

    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     // cache jQuery object of every field once after a render 
     this.field = _.reduce(this.fields, function(fields, selector, key) { 
      fields['$' + key] = this.$(selector); 
      return fields; 
     }, {}, this); 
     return this; 
    }, 
    reset: function() { 
     // reset all the fields once without repeating code. 
     _.each(this.field, function($field) { 
      $field.val(""); 
     }); 
     return this; 
    }, 
    getValues: function(keys) { 
     // get the value of multiple fields returned in a nice object 
     // ready to be sent to a Backbone model. 
     return _.reduce(keys, function(data, key) { 
      data[key] = this.field[key].val(); 
      return data; 
     }, {}, this); 
    }, 

    saveUser: function() { 
     var field = this.field, 
      user = new User(this.getValues([ 
       'username', 
       'lastName', 
       'regNumber', 
       'password', 
       'departmentName', 
       'email', 
       'role', 
      ])); 

     user.set({ isOpen: field.$isOpen.is(':checked') }); 

     if (field.$dayOfWeek.is(':checked')) { 
      user.set("dayOfWeek", field.$dayOfWeek.val()); 
     } else if (field.$dayOfMonth.is(':checked')) { 
      user.set("dayOfMonth", field.$dayOfMonth.val()); 
     } 

     user.save(); 
     this.reset(); 
    }, 
}); 

在下面的代碼片段，你把上下文（this）到一個局部變量。我看到很多，我可以說我在堆棧溢出問題中看到它的時間有90％，這沒有任何意義。它顯然尖叫複製粘貼。

render: function() { 
    var that = this; 
    // ... 
    that.$el.html(myHtml); 
    return this; 
} 

請告訴我，你看，你把this爲that，然後使用that整個功能，那麼你還是回到this？！

當在動態創建的回調中需要對象時，將上下文放入局部變量中非常有用。

render: function() { 
    var that = this; // this is available here 
    setTimeout(function() { 
     // here this is not available. 
     that.handleCallback(); 
    }, 10); 
    // here we are in the same context as the first line. 
    return this; 
}