5

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

    }
});
4

1 に答える 1

8

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

イベントは期待どおりに機能します。

これで、何がうまくいかなかったのかがわかります。しかし、どうすれば修正できますか？行う必要があるのは、次のように DOM に直接ConnectionsView追加するように調整することだけです。$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
}

をテンプレートに押し込み、<div class="external-accounts">を直接挿入します。このようにして、常に DOM 要素を操作します。文字列はイベントを認識しませんが、DOM 要素は認識します。ConnectionsViewConnectionView

于 2012-06-26T18:25:32.680 に答える