Javascript Backbonejs对el的使用

我已经创建了两个独立的视图，一个用于呈现模板，另一个是绑定事件的位置，然后我尝试将它们合并到一个视图中，在这种情况下会导致

未捕获类型错误：Object[Object Object]没有方法“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调用正在使用

el

，而在

SigninView

的

$（this.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);
    }
};

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();

});

在我的Router.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);
    }
};

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();

});

---

我想我解决了你的问题

首先合并视图并删除行

var-toSignin=new-toSigninView（）

其次，修改utils.js代码，如下所示：

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

Backbone.View
没有
template（）
方法（这是您试图使用
this.template（）
调用的方法。是否要使用
\uu.template（）
相反？我想你认为
这个===window
是在主干方法上下文中，而事实并非如此。不清楚你为什么在你的问题中包含
window.utils
，因为你似乎从来没有在你的其他代码中使用过它。我已经添加了路由器，在那里我调用
utils.js
哦，对不起，这是我问题中的一个输入错误。我已经升级了ted它。这是否意味着其他视图的
var-toSignin=new-toSigninView（）；
的所有实例也应该删除？我还需要用
new-viewName（）实例化视图吗
像以前一样？是的，你应该删除你提到的所有实例，你不需要再实例化视图，因为
loadTpl
可以为你做。但是我不认为你使用主干网的方式是最佳的，试着看看我看到的这个教程，顺便说一句，我从这里得到了它的模板呈现这是因为我试图避免使用
Require.js
。这是一个很好的参考，它们现在工作正常，非常感谢！