JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<div id="container"></div>
<script type='text/template' id='post-template'>
<div class='post'>
<div><%= status %></div>
<div class='author'><%= author.name %></div>
</div>
</script>
<script type='text/template' id='comment-template'>
<div class='comment'>
<div class="comment-text"><%= text %></div>
<div class="author"><%= author %></div>
</div>
</script>
CSS
.post { margin: 10px; background: #EFEFEF; padding: 10px; }
.author { color: blue; font-size: smaller; text-align: right; }
.comment { margin-left: 10%; padding: 10px; background: white; }
JavaScript
var json = {
"posts" : [
{
"_id": "50f5f5d4014e045f000002",
"author": {
"name" : "Chris Crawford",
"photo" : "http://example.com/photo.jpg"
},
"status": "This is a sample message.",
"comments": [
{
"_id": "5160eacbe4b020ec56a46844",
"text": "This is the content of the comment.",
"author": "Bob Hope"
},
{
"_id": "5160eacbe4b020ec56a46845",
"text": "This is the content of the comment.",
"author": "Bob Hope"
}
]
},
{
"_id": "50f5f5d4014e045f000003",
"author": {
"name" : "Chris Crawford",
"photo" : "http://example.com/photo.jpg"
},
"status": "This is another sample message.",
"comments": [
{
"_id": "5160eacbe4b020ec56a46846",
"text": "This is the content of the comment.",
"author": "Bob Hope"
},
{
"_id": "5160eacbe4b020ec56a46847",
"text": "This is the content of the comment.",
"author": "Bob Hope"
}
]
}
]};
var Comments = Backbone.Model.extend({
defaults : {
_id : "",
text : "",
author : ""
}
})
var CommentsCollection = Backbone.Collection.extend({ model : Comments })
var Posts = Backbone.Model.extend({
defaults : {
_id : "",
author : "",
status : ""
},
initialize: function(attributes) {
if (attributes.comments && attributes.comments.length > 0) {
var commentModels = attributes.comments.map(function(comment) { return new Comments(comment); });
this.set("comments", new CommentsCollection(commentModels));
}
}
})
var PostsCollection =...