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" >
<h1>Application</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="videos" >
<li {{action removeItem target="this"}}>{{view.content.name}}</li>
</script>
JavaScript
DS.attr.transforms.array = {
from: function(serialized) {
return serialized;
},
to: function(deserialized) {
return deserialized;
}
}
var App = Em.Application.create({
ApplicationController: Em.Controller.extend({}),
ApplicationView: Em.View.extend({
templateName: 'application'
}),
Router: Em.Router.extend({
root: Em.Route.extend({
index: Em.Route.extend({
route: '/',
connectOutlets: function(router) {
var controller = router.get('applicationController');
controller.connectOutlet('videos');
}
})
})
}),
VideosController: Em.ArrayController.extend({
init: function(){
this._super();
this.set('content', App.store.findAll(App.Video));
}
}),
VideosView: Em.CollectionView.extend({
contentBinding: 'controller.content',
tagName: 'ul',
itemViewClass: Em.View.extend({
templateName: 'videos',
removeItem: function(){
var video = App.store.find(App.Video, this.get('content.id'));
video.deleteRecord();
}
})
}),
Video: DS.Model.extend({
primaryKey: 'id',
name: DS.attr('string'),
filename: DS.attr('string'),
status: DS.attr('string'),
pages: DS.attr('array', { defaultValue: [] })
}).reopenClass({
FIXTURES:[
{ id: 1, name: 'Home video', filename: 'file_name_video1', status: 'active', pages: ['http://mysite.ru/', 'http://mysite.ru/home/'] },
{ id: 2, name: 'About video', filename: 'file_name_video2', status: 'active', pages: ['http://mysite.ru/about/', 'http://mysite.ru/contacts/']},
{ id: 3, name: 'Blog video', filename: 'file_name_video3', status: 'active', pages: ['http://mysite.ru/blog/', 'http://mysite.ru/live/'] }
]
}),
store:...