JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.min.js"></script>
<script type='text/x-handlebars' data-template-name='item'><span>
{{#with content}}
{{name}}
{{/with}}
</span></script>
<div id="main"></div>
JavaScript
App = Ember.Application.create({});
App.Item = Ember.View.extend({
templateName: "item",
didInsertElement: function() {
console.log('just inserted ' + this.getPath('content.name'));
}
});
App.CollectionView = Ember.CollectionView.extend({
itemViewClass: "App.Item",
contentBinding: "App.collectionController",
willInsertElement: function() {
// The CollectionView should be in the "hasElement" state... which is pre-rendering.
console.log(this.get('state'));
},
didInsertElement: function() {
// The CollectionView and all of it's children should be rendered now and it should be in the "inDOM" state... which is post rendering.
console.log(this.get('state'));
$.each(this.$('span'), function(index, value) {
$(value).after($(value).offset().top)
});
// A run loop is started for a view when it's initialized and
// is ended when it's initialization is completed.
// That processes includes rendering all of this view's children.
// And after all of its childrens didInsertElemnt calls are made.
// Hopefully this is the hook you're looking for.
Ember.run.once(this, function() {
console.log('inside run.once');
});
}
});
App.collectionController = Ember.ArrayController.create({
content: []
});
var collectionView = App.CollectionView.create();
collectionView.appendTo("#main")
App.collectionController.addObject({
name: "Thing"
});
App.collectionController.addObject({
name: "Other Thing"
});