JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.4/ember-data.min.js"></script>
<script src="http://todomvc.com/architecture-examples/emberjs/bower_components/ember-localstorage-adapter/localstorage_adapter.js"></script>
<script type="text/x-handlebars" data-template-name="index">
{{ input type="text" value=title }}
<button {{action "create"}}>Add</button>
<ul>
{{#each item in content itemController="todo"}}
<li>
<span>{{item.title}}</span>
<button {{action "remove"}}>delete</button>
</li>
{{/each}}
</ul>
</script>
JavaScript
App = Ember.Application.create({});
App.ApplicationAdapter = DS.LSAdapter.extend();
App.Todo = DS.Model.extend({
title: DS.attr("string")
})
App.IndexRoute = Ember.Route.extend({
setupController: function(controller) {
var todos = this.store.find('todo');
controller.set("content", todos);
}
});
App.TodoController = Ember.ObjectController.extend({
actions: {
remove: function () {
var todo = this.get('model');
todo.deleteRecord();
todo.save();
}
}
})
App.IndexController = Ember.ArrayController.extend({
actions: {
create: function () {
var title = this.get("title");
var todo = this.store.createRecord('todo', {
title: title
});
todo.save();
}
}
});