Backbonejs使用el

我创建了2个单独的视图，1个用于渲染模板，另一个用于绑定事件，然后我尝试将它们合并为一个，在这种情况下它会导致Uncaught TypeError: Object [object Object] has no method 'template' 。 它呈现模板和事件也正常，但我收到错误。

edit.js，这是组合视图，我认为它与错误来自的el有关

 window.EditView = Backbone.View.extend ({ events: { "click #btn-save" : "submit" }, initialize: function() { this.render(); }, render: function() { $(this.el).html(this.template()); return this; }, submit: function () { console.log('editing'); $.ajax({ ... }); return false; } }); var editView = new EditView(); 

signin.js，这是我无法合并的视图，因为ajax调用和在SigninView的$(this.el)中使用el会导致模板的呈现错误

 window.toSigninView = Backbone.View.extend ({ el: '#signin-container', events: { "click #btn-signin" : "submit" }, initialize: function() { console.log('Signin View'); }, submit: function() { $.ajax({ ... }); return false; } }); var toSignin = new toSigninView(); window.SigninView = Backbone.View.extend({ initialize: function() { this.render(); }, render: function() { $(this.el).html(this.template()); return this; } }); 

我使用utils.js来调用我的模板

 window.utils = { loadTpl: function(views, callback) { var deferreds = []; $.each(views, function(index, view) { if (window[view]) { deferreds.push($.get('templates/' + view + '.html', function(data) { window[view].prototype.template = _.template(data); })); } else { alert(view + " not found"); } }); $.when.apply(null, deferreds).done(callback); } }; 

在我的Router.js中，这就是我调用模板的方式

 editProfile: function() { if (!this.editView) { this.editView = new EditView(); } $('#global-container').html(this.editView.el); }, utils.loadTpl (['SigninView', 'EditView'], function() { appRouter = new AppRouter(); Backbone.history.start(); }); 

Answer 1

我想我找出了你的问题。

首先合并您的视图并删除行var toSignin = new toSigninView();

第二次修改你的utils.js代码，如下所示：

 window[view].prototype.template = _.template(data); new window[view]();