Javascript 主干视图事件未触发-不确定原因

我正在尝试启动

单击
事件，但它不起作用。也许有人能看到我看不到的东西

ConnectionView = GlobalView.extend({
    tagName: 'div',

    events: {
        "click .social-links": "check"
    },

    initialize: function() {
        this.render();

        this.model.bind("change", this.render);
    },

    render: function() {
        // Compile the template using underscore
        var template = _.template($("#connection-template").html(), this.model.toJSON());

        // Load the compiled HTML into the Backbone "el"
        $(this.el).html(template);        
    },

    check: function(e) {
        e.preventDefault();

        alert("woot");
    }
});

下面是它正在拉取的模板：

<script id="connection-template" type="text/template">
    <a id="link-<%= alt %>" class="social-links" href="<%= url.replace('||state||', state).replace('||timestamp||', time) %>">add <%= name %></a>
</script>



以下是将ConnectionView放入DOM的视图：

ConnectionsView = GlobalView.extend({
    tagName: 'div',

    initialize: function(){
        this.collection.bind("reset", this.render, this);
    },

    render: function(){        
        var $connections = $("<div class='external-accounts'>");

        this.collection.each(function (model) {            
            var conn = new ConnectionView({model: model});
            $connections.append(conn.el);
        });

        // Compile the template using underscore
        var template = _.template($("#connections-template").html());
        // Load the compiled HTML into the Backbone "el"
        $(this.el).html(template({
            connectionsList: $connections.outer()
        }));
    },

    destroy: function() {
        this.constructor.__super__.destroy.apply(this);

    }
});

ConnectionsView=GlobalView.extend({
标记名：“div”，
初始化：函数（）{
this.collection.bind（“reset”，this.render，this）；
},
render:function（）{
变量$connections=$（“”）；
this.collection.each（函数（模型）{
var conn=newconnectionview（{model:model}）；
$connections.append（conn.el）；
});
//使用下划线编译模板
var template=35;.template（$（“#连接模板”）.html（）；
//将编译后的HTML加载到主干“el”中
$（this.el）.html（模板({
connectionsList:$connections.outer（）
}));
},
销毁：函数（）{
this.constructor.\uuuu super\uuuu.destroy.apply（this）；
}
});
您的问题是如何填写
连接视图
的
el
。您正在这样做：

// Load the compiled HTML into the Backbone "el"
$(this.el).html(template({
    connectionsList: $connections.outer()
}));

我不知道
.outer（）
是关于什么的，但这并不重要。重要的是，所有内容都要经过编译的下划线
template（）
函数，这意味着所有内容最终都会在进入页面的过程中转换为字符串。一旦
$connections
中的DOM元素在一个字符串中，事件绑定就会丢失，不再有效

考虑这个例子：


在那里，我们这样做：

var $connections = $('<div>');
var conn = new ConnectionView({ model: m });
$connections.append(conn.el);

var template = _.template('<%= connectionsList %>');
$('#view-goes-here').append(template({
    connectionsList: $connections.html()
}));

活动按预期进行

所以现在我们知道出了什么问题。但是我们如何解决它呢？我们需要做的就是调整您的
连接视图
，将
$connections
直接添加到DOM中，如下所示：

var $connections = $('<div>');
var conn = new ConnectionView({ model: m });
$connections.append(conn.el);
$('#view-goes-here').append($connections);

render: function() {
    // Move <div class='external-accounts'> into your #connections-template.
    var template = _.template($("#connections-template").html());
    this.$el.html(template());
    var $external = this.$el.find('.external-accounts');
    this.collection.each(function (model) {
        var conn = new ConnectionView({model: model});
        $external.append(conn.el);
    });
    return this; // This is conventional
}

render:function（）{
//进入您的#连接模板。
var template=35;.template（$（“#连接模板”）.html（）；
这个.$el.html（template（））；
var$external=this.$el.find（'.external accounts'）；
此.collection.each（函数（模型）{
var conn=newconnectionview（{model:model}）；
$external.append（conn.el）；
});
返回此；//这是常规的
}

将
推入
连接视图
模板，并将
连接视图直接插入其中。这样，您总是使用DOM元素，字符串不知道事件，但DOM元素知道。
将
ConnectionView
的
el
插入DOM的代码在哪里？我更新了这个问题。
。outer
是我添加到jQuery中的一个自定义方法-它只创建一个
包装器并从中获取
.html
。我之所以这样做，是因为.html只抓取了当前元素中的内容，而不是整个内容。