最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - backbone.js - events only firing once - Stack Overflow

programmeradmin0浏览0评论

My events aren't working as I'd hoped, and I think I know why. When the perpage span is clicked, everything renders correctly. But I realized - maybe the events aren't reattached to the new markup? Could that be why it only works once? (If I click the span with the number 10 in it, 10 items appear like it should be. But afterwards, anything I click doesn't change anything)

What's a better way to organize this? Should the template not include the pagination portion? How do I attach backbone events to markup after it has rendered again?

var ListView = Backbone.View.extend({

    initialize: function() {
        var self = this;
        this.collection.bind("refresh", function(){self.render();});
        this.render();
    },

    events: {
        'click ul#perpage span': 'setperpage'
    },

    setperpage: function(event) {
        this.collection.perpageurl = '/perpage/' + $(event.target).text();
        this.collection.fetch();
        this.collection.refresh();
    },

    render: function() {

    template = _.template('\
    <table>\
    <% _(collection).each(function(model){%>\
    <tr><td><%=model.id%></td><td><%=model.name%></td><td><%=model.email%></td></tr>\
    <%}); %>\
    </table>\
    <ul id="perpage">\
    <li><span>5</span></li>\
    <li><span>10</span></li>\
    </ul>\
    ');

        var context = {collection: this.collection.toJSON()};
        $(this.el).html(template(context));
        $('#app').html(this.el);
        return this;
    }
});

My events aren't working as I'd hoped, and I think I know why. When the perpage span is clicked, everything renders correctly. But I realized - maybe the events aren't reattached to the new markup? Could that be why it only works once? (If I click the span with the number 10 in it, 10 items appear like it should be. But afterwards, anything I click doesn't change anything)

What's a better way to organize this? Should the template not include the pagination portion? How do I attach backbone events to markup after it has rendered again?

var ListView = Backbone.View.extend({

    initialize: function() {
        var self = this;
        this.collection.bind("refresh", function(){self.render();});
        this.render();
    },

    events: {
        'click ul#perpage span': 'setperpage'
    },

    setperpage: function(event) {
        this.collection.perpageurl = '/perpage/' + $(event.target).text();
        this.collection.fetch();
        this.collection.refresh();
    },

    render: function() {

    template = _.template('\
    <table>\
    <% _(collection).each(function(model){%>\
    <tr><td><%=model.id%></td><td><%=model.name%></td><td><%=model.email%></td></tr>\
    <%}); %>\
    </table>\
    <ul id="perpage">\
    <li><span>5</span></li>\
    <li><span>10</span></li>\
    </ul>\
    ');

        var context = {collection: this.collection.toJSON()};
        $(this.el).html(template(context));
        $('#app').html(this.el);
        return this;
    }
});
Share Improve this question edited Aug 29, 2015 at 15:32 user3335966 2,7444 gold badges32 silver badges33 bronze badges asked Apr 16, 2011 at 3:10 MatthewMatthew 15.7k28 gold badges91 silver badges124 bronze badges 1
  • 2 event.target can be misleading, you should use event.currentTarget as described on quirksmode/js/events_order.html – pawlik Commented Apr 16, 2011 at 22:05
Add a ment  | 

1 Answer 1

Reset to default 11

try:

render: function()
{
    // …

    this.delegateEvents();
    return this;
}

For debugging events in JavaScript use Visual Event. It will tell you which elements have events attached to them.

发布评论

评论列表(0)

  1. 暂无评论