How to bind a HTML element as soon as it is rendered

Question

I have a span in my view which is rendered using Backbone.js

I want to get its HTML as soon as its rendered

Something like : $(span).html()

How can I do this?

Answer 1

This question confused me a bit, because Backbone.View doesn't actually have a render method at all (well, technically it does but its a no-op); it's 100% user-defined. Given that fact, checking ... well, anything after you render is as simple as ... well, checking it after you render.

In other words, if your view's render method is:

var YourView= Backbone.View.extend({
    render: function() {
        this.$el.html(someHtml);
    }
});

Then all you need to do is:

var YourView= Backbone.View.extend({
    render: function() {
        this.$el.html(someHtml);
        console.log(this.$el.html()); // check rendered HTML
    }
});

If you want to intermediate that with events you could (as @aerodynamo suggested):

var YourView= Backbone.View.extend({
    events: {'customPostRender': 'postRender'},
    postRender: function() {
        console.log(this.$el.html()); // check rendered HTML
    },
    render: function() {
        this.$el.html(someHtml);
        this.trigger('customPostRender');
    }
});

but really that's not even necessary.

Answer 2

不确定MutationObserver是否有帮助，但绝对值得一试：-)