Basic Ember Template
HTML
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.js"></script>
<script type="text/x-handlebars" data-template-name="application" >
Hello World!
{{outlet}}
{{! this works... {{collection App.ItemsView itemViewClass="App.ItemView" contentBinding="App.itemController"}}
</script>
<script type="text/x-handlebars" data-template-name="item" >
{{view.content.description}} -
<button {{action toggleDetail target="view"}}>{{view.toggleDetailText}}</button>
{{#if view.showDetail}}
<img {{bindAttr src="view.content.img"}}>
{{/if}}
</script>
<div id="ember-application-root">
</div>
JavaScript
App = Ember.Application.create({
rootElement : "#ember-application-root",
});
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.ApplicationController = Ember.Controller.extend();
App.ItemsView = Ember.CollectionView.extend({
itemViewClass : App.ItemView,
});
App.ItemView = Ember.View.extend({
templateName : "item",
toggleDetailText: function() {
return this.get('showDetail') ? 'hide' : 'show';
}.property('showDetail'),
toggleDetail: function() {
this.toggleProperty('showDetail');
}
});
App.ItemsController = Ember.ArrayController.extend({
});
var content = [{
description: 'first item',
img: 'http://25.media.tumblr.com/tumblr_ll3y1pZDVJ1qb08qmo1_250.jpg'
}, {
description: 'second item',
img: 'http://24.media.tumblr.com/tumblr_lk7u170Ztt1qb33vho1_250.jpg'
}, {
description: 'third item',
img: 'http://25.media.tumblr.com/tumblr_lj5367UKg11qzgqodo1_250.jpg'
}];
App.itemController = Ember.ArrayController.create({
content : content
})
App.Router = Ember.Router.extend({
enableLogging : true,
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
connectOutlets : function(router){
console.log("calling connectOutlets");
router.get("applicationController").connectOutlet({
viewClass : App.ItemsView,
controller : App.itemController,
context : content
})
}
})
})
});
App.initialize();