JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<script type="text/x-handlebars" data-template-name="views_items_index">
<div class="some-class">
<p>{{item.title}}</p>
<div>
{{view item.subview}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="views_items_show">
Content: {{text}}
</script>
JavaScript
App = Ember.Application.create();
App.Item = Ember.Object.extend({
title: 'A cool item',
subview: Ember.View.extend({
templateName: 'views_items_show',
textBinding: 'parentView.item.text'
})
});
App.ItemIndexView = Ember.ContainerView.extend({
templateName: 'views_items_index',
item: null,
updateView: function() {
var childViews = this.get('childViews');
childViews.popObject();
childViews.pushObject(Ember.getPath(this, 'item.subview').create());
}.observes('item')
});
itemIndexView = App.ItemIndexView.appendTo('body');
itemIndexView.set('item', App.Item.create({text: 'Some content'}));
Ember.run.later(function() {
itemIndexView.set('item', App.Item.create({text: 'Another content'}));
}, 1000);
Ember.run.later(function() {
itemIndexView.set('item', App.Item.create({text: 'Yet another content'}));
}, 2000);