主干视图事件未触发 - 不知道原因

Backbone view event not firing - not sure why

本文关键字：不知道 视图 事件      更新时间：2023-09-26

>我试图触发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);
    }
});

你的问题是你如何填写ConnectionsView的el。您正在执行此操作：

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

我不知道.outer()是怎么回事，但这并不重要。重要的是，所有内容都通过编译的下划线template()函数，这意味着所有内容最终都将在进入页面的过程中转换为字符串。一旦 $connections 中的 DOM 元素位于字符串中，事件绑定就会丢失，并且不再起作用。

请考虑以下示例：

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模板中，然后将ConnectionView直接插入其中。这样你总是使用 DOM 元素，字符串不知道事件，但 DOM 元素知道。

相关文章：