EL的Backbonejs使用 [英] Backbonejs usage of el

问题描述

我创建了2个独立的意见，1到呈现模板，另一个是我绑定的事件，然后我试图把它们合并成一个在这种情况下，它会导致未捕获类型错误：对象[对象的对象]没有方法模板。它使得模板和事件工作为好，但我得到的错误。

edit.js，这是综合来看，我认为它是与他们的报，其中错误是从

未来

  window.EditView = Backbone.View.extend（{
    事件：{
        点击＃BTN-拯救：提交
    }，
    初始化：功能（）{
        this.render（）;
    }，
    渲染：功能（）{
        $（this.el）的.html（this.template（））;
        返回此;
    }，
    提交：功能（）{
        的console.log（'编辑'）;
        $阿贾克斯（{...}）;
        返回false;
    }
}）;
VAR EditView中=新EditView中（）;
 

signin.js，这是我不能因为报正在使用的Ajax调用，并在 SigninView <合流的观点/ code>的 $（this.el）这会导致模板的渲染故障

  window.toSigninView = Backbone.View.extend（{
    EL：＃登入容器，
    事件：{
        点击＃BTN-登入：提交
    }，
    初始化：功能（）{
        的console.log（'签到查看'）;
    }，
    提交：功能（）{
        $阿贾克斯（{...}）;
        返回false;
    }
}）;
VAR toSignin =新toSigninView（）;window.SigninView = Backbone.View.extend（{
    初始化：功能（）{
        this.render（）;
    }，
    渲染：功能（）{
        $（this.el）的.html（this.template（））;
        返回此;
    }
}）;
 

和我使用utils.js打电话给我的模板

  window.utils = {
    loadTpl：功能（美景，回调）{
        变种deferreds = [];
        $。每个（意见，功能（索引，视图）{
            如果（窗口[查看]）{
                deferreds.push（$。获得（'模板/+观点+'的.html'功能（数据）{
                    窗口[观点] .prototype.template = _.template（数据）;
                }））;
            }其他{
                警报（查看+找不到）;
            }
        }）;
        $ .when.apply（NULL，deferreds）.done（回调）;
    }
};
 

在我Router.js，我这是怎么调用模板的渲染

  editProfile：功能（）{
    如果（！this.editView）{
        this.editView =新EditView中（）;
    }
    $（'＃全球集装箱）HTML（this.editView.el）;
}，
utils.loadTpl（['SigninView'，'EditView中']，
功能（）{
    appRouter =新AppRouter（）;
    Backbone.history.start（）;}）;
 




解决方案

我认为我想通了你的问题。

首先合并的意见，并删除该行 VAR toSignin =新toSigninView（）;

二修改utils.js code是这样的：

 窗口[观点] .prototype.template = _.template（数据）;
新的窗口[观点]（）;
 

I've created 2 separate views, 1 to render the template and the other one is where I bind the events, then I tried merging them into one in which case it causes an Uncaught TypeError: Object [object Object] has no method 'template'. It renders the template and the events are working as well, but I get the error.

edit.js, this is the combined view, which I think it has something to do with their el where the error is coming from

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, this is the view that I can't merge because of the el being used by the ajax call and in SigninView's $(this.el) which causes the rendering of the templates faulty

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

and I use utils.js to call my templates

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

In my Router.js, this is how I call the rendering of templates

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

});

解决方案

I think that I figured out your problem.

First merge your views and delete the line var toSignin = new toSigninView();

Second modify your utils.js code like this :

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

这篇关于EL的Backbonejs使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！