JSFiddle - React, Tailwind, and code Playground
HTML
<script id="tpl-page-current" type="text/template">
<table>
<caption></caption>
<thead>
<tr>
<th><span>Page name</span></th>
<th><span>Slug</span></th>
<th><span>Published</span></th>
<th><span>Changed</span></th>
</tr>
</thead>
</table>
</script>
<script id="tpl-page-list-item" type="text/template">
<tr>
<td>{{_path}}</td>
<td>{{company}}</td>
<td>{{created}}</td>
{{each propertiesABC}}
<td>{{ this}}</td>
{{/each}}
<td><input type='checkbox' /></td>
</tr>
</script>
JavaScript
var data=[
{
_path: "abc/",
company: "newABC",
created: "2013-10-29T18:38:27.949Z",
propertiesABC: [],
type: "delete",
words:[ "good","bad"]
},
{
_path: "abc/",
company: "newABC",
created: "2013-10-29T18:38:27.949Z",
propertiesABC: [],
type: "delete",
words:[ "good","bad"]
},
{
_path: "abc/",
company: "newABC",
created: "2013-10-29T18:38:27.949Z",
propertiesABC: [],
type: "delete",
words:[ "good","bad"]
},
{
_path: "abc/",
company: "newABC",
created: "2013-10-29T18:38:27.949Z",
propertiesABC: [],
type: "delete",
words:[ "good","bad"]
}
];
var Page = Backbone.Model.extend({
defaults:{
{
_path: "abc/",
company: "newABC",
created: "2013-10-29T18:38:27.949Z",
propertiesABC: [],
type: "delete",
words:[ "good","bad"]
}
});
var PageCollection = Backbone.Collection.extend({
url: '/pages',
model: Page,
initialize: function() {
this.CurrentModel=new Page();
},
parse: function(response) {
this.CurrentModel=new Page(response);
return response;
},
toJSON: function() {
var obj={};
obj.CurrentModel=this.CurrentModel.toJSON();
obj.Children=this.map(function(model){ return model.toJSON(); });
return obj;
}
});
var PageListItemView = Backbone.View.extend({
template:Handlebars.compile($('#tpl-page-list-item').html()),
events: {
"click input[type=checkbox]": "publish"
},
render: function (eventName) {
var html=this.template(this.model.toJSON());
this.setElement($(html));
return this;
},
publish: function () {
var checked=(this.$("input").attr("checked")) ? "Checked":"Unchecked";
...