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

Question

我正试图让click事件发生,但它无法正常工作.也许有人可以看到我无法看到的东西.

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

    }
});

Answer 1

你的问题是你如何在你填写ConnectionsView的el.你这样做:

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

我不知道究竟.outer()是什么,但这并不重要.重要的是,所有内容都是通过编译的Underscore template()函数完成的,这意味着一切都将在进入页面的过程中最终转换为字符串.一旦你的DOM元素在$connections一个字符串中,事件绑定就会丢失,任何东西都不再有效.

考虑这个例子:

http://jsfiddle.net/ambiguous/4tjTm/

在那里我们这样做:

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

添加ConnectionView到页面.事件在那里不起作用,因为template()返回一个字符串,该字符串被解析为最终在页面中的DOM元素.但是,如果我们将$connections直接添加到页面:

http://jsfiddle.net/ambiguous/AKkCJ/

使用这样的东西:

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

事件按预期工作.

所以现在我们知道出了什么问题.但是我们该如何解决呢？我们需要做的就是调整你的直接ConnectionsView添加$connections到DOM,如下所示:

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
}

将其推<div class="external-accounts">入ConnectionsView模板并将ConnectionViews直接插入其中.这种方式你总是使用DOM元素,字符串不知道事件但DOM元素.