为什么我的“ el”不能在Backbone中工作？

Question

define([
    'jquery',
    'underscore',
    'backbone',
    'text!modules/index/templates/container.html'
], function($, _, Backbone, container_temp){
    var indexView = Backbone.View.extend({
        el: $('.main_container'),
        initialize:function(){
            _.bindAll(this, 'render');
        },
        render:function(){
            var $this = this;
            var $el = this.el;
            $.get('/js/index/render', {}, function(data){
                var dat = JSON.parse(data);
                $this.pars = dat;
                var tpl = _.template(container_temp, dat);
                $el.html(tpl);
            });
        }
    });
    return new indexView;
});

运行此代码应该用HTML填充$ el。 但是，我的浏览器弄乱了$el.html(tpl); 。

Uncaught TypeError: Object #<HTMLDivElement> has no method 'html' 

要解决此问题，我必须做： $($el).html(tpl); 这样jQuery注册。

这看起来很尴尬。 在我过去的项目中，我一直都是以前一种方式完成的，并且一直都有效。

Answer 1

this.el是原始DOM元素，但html方法属于jQuery。

尝试var $el = this.$el; 在您的渲染方法中：

render:function(){
    var $this = this;
    var $el = this.$el;
    $.get('/js/index/render', {}, function(data){
        var dat = JSON.parse(data);
        $this.pars = dat;
        var tpl = _.template(container_temp, dat);
        $el.html(tpl);
    });
}

Answer 2

如果您查看渲染功能：

render:function(){
        var $this = this;
        var $el = this.el;
        $.get('/js/index/render', {}, function(data){
            var dat = JSON.parse(data);
            $this.pars = dat;
            var tpl = _.template(container_temp, dat);
            $el.html(tpl);
        });
    }

您显式分配了var $el因此以下$ el等于this.el，这是原始dom元素，而没有通常使用$ el获得的jQuery包装器。

试试这个： this.$el不带var declaration 。

因此，要使$ el进入$ .get范围，代码应类似于：

render:function(){
    var $this = this;
    var element = this.$el;
    $.get('/js/index/render', {}, function(data){
        var dat = JSON.parse(data);
        $this.pars = dat;
        var tpl = _.template(container_temp, dat);
        element.html(tpl);
    });
}