JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<div id="display"></div>
<script type="text/template" id="attr">
<h3>model attributes</h3>
<% _.each(attrs, function(attr, index, attrs) { %> <li> <%= attr %> </li>
<% }) %>
</script>
JavaScript
var Parent = Backbone.Model.extend({
defaults: {
name: "john",
lname: "smith",
age: 30,
language: "english",
"location": "belgium"
}
});
var Child = Parent.extend({
defaults: {
hobby: "doing nothing",
age: 24,
occupation: "student"
},
initialize: function () {
this.constructor.__super__.initialize.apply(this, arguments);
//console.log(this.attributes);
}
});
Child.prototype.defaults = _.defaults(Child.prototype.defaults, Parent.prototype.defaults);
var RandomView = Backbone.View.extend({
tagName: "ul",
template: _.template($("#attr").html()),
render: function () {
this.$el.html(this.template({
attrs: this.model.toJSON()
}));
return this;
}
});
var view = new RandomView({model: new Child()});
var view1 = new RandomView({model: new Child()});
$("#display").append(view.render().el);
$("#display").append(view1.render().el);