Looking for render event in delegateEvents in Backbone.View

Question

I have one question about Backbone.View and its delegateEvents. You can read in docs here about extend method. Using this method, you can "override the render function, specify your declarative events" etc.

I have a question about declarative events or delegateEvents (not sure how should I call it). They are described here. And here is an example:

  var DocumentView = Backbone.View.extend({
  events: {
    "dblclick"                : "open",
    "click .icon.doc"         : "select",
    "contextmenu .icon.doc"   : "showMenu",
    "click .show_notes"       : "toggleNotes",
    "click .title .lock"      : "editAccessLevel",
    "mouseover .title .date"  : "showTooltip"
  },    
  open: function() {
    window.open(this.model.get("viewer_url"));
  },
  select: function() {
    this.model.set({selected: true});
  }, 
  ...
});

As you can see, you can add different events on specific objects in template DOM. Like click or mouseover. So, having this template:

<foo></foo>
{#myplayers}
<player class="normal" value="{player}" style="{style}"></player>
{/myplayers}

You can add different click event on every single player, like this:

    events: {
        'click player': 'playerClick'
    },
    playerClick: function( e ) {
        var playerValue = e.currentTarget.getAttribute( 'value' );
        // HERE: e.currentTarget I've particular player

    }

My question: Can I declare render event in similar way as click event? I want to catch event when single player (not the whole list) is rendered. I need to get e.currentTarget there and change its css a little bit.

I'm looking for something like this:

events: {
    'render player': 'playerRendered'
},
playerRendered: function( e ) {
    var playerValue = e.currentTarget.getAttribute( 'value' );
    // HERE: e.currentTarget I've particular player

}

How can I do this? Because render in delegateEvents, doesn't work:/

Answer 1

Maybe in the initialize function within your view you can have a listenTo with the render. Something like that:

var view = Backbone.View.extend({
    className: 'list-container',
    template: _.template($('#my-template').html()),
    initialize: function () {
      this.listenTo(this, 'render', function () {
        console.info('actions');          
      });
    },
    render: function() {
      this.$el.html(this.template(this));
      return this;
    },
});

And then:

var myView = new view();
myView.render();
myView.trigger('render');
$('#container').html(myView.el);