JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
{
{
outlet
}
}
</script>
<script type="text/x-handlebars" data-template-name="people">
{
{#each person in controller
}
} {
{#with person
}
} {
{
view view.itemViewClass
}
} {
{
/with}}
{{/each
}
}
</script>
<script type="text/x-handlebars" data-template-name="person-item">
< p > ID: {
{
id
}
} < /p>
<p>Name: {{name}}</p > {
{#each tag in tags
}
} < p > Tag: {
{
tag.name
}
} < /p>
{{/each
}
}
</script>
JavaScript
App = Em.Application.create({});
App.Tag = Ember.Object.extend({
name: null
});
App.Person = DS.Model.extend({
name: DS.attr('string'),
tags: null,
init: function () {
this._super();
this.set('tags', [
App.Tag.create({
"name": "good-looking"
}),
App.Tag.create({
"name": "not-too-bright"
})]);
}
});
App.Person.FIXTURES = [{
"id": 1,
"name": "Tom Dale",
}];
App.store = DS.Store.create({
revision: 4,
adapter: DS.FixtureAdapter.create({})
});
App.ApplicationController = Em.Controller.extend({});
App.ApplicationView = Em.View.extend({
templateName: 'application'
});
App.PeopleController = Em.ArrayController.extend({});
App.PeopleView = Em.View.extend({
templateName: 'people',
tagName: 'ul',
itemViewClass: Em.View.extend({
templateName: 'person-item'
})
});
App.Router = Em.Router.extend({
enableLogging: true,
location: 'none',
root: Em.Route.extend({
index: Em.Route.extend({
route: '/',
redirectsTo: 'people.index'
}),
people: Em.Route.extend({
route: '/people',
index: Em.Route.extend({
route: '/',
connectOutlets: function (router) {
router.get('applicationController').connectOutlet('people', App.Person.find());
},
})
}),
})
});
App.initialize();