JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.js"></script>
<div id="container">
<button class="inner">Inner</button>
</div>
CSS
body {
margin: 10px;
font: 13px/1.3 Arial;
}
JavaScript
var Story = Backbone.Model.extend({
defaults: {
title : 'This is the title',
description : 'Description',
points : 0
}
});
var Stories = Backbone.Collection.extend({
model: Story
});
var BaseView = Backbone.View.extend({
el: '#container',
events: {
'click .inner': 'onClickInner'
},
onClickInner: function () {
//this.options.x++;
this.addModel();
this.render();
},
addModel: function () {
this.story = new Story({
title: 'This is my collection test ',
description: 'this is the description'
});
this.stories.add(this.story);
},
initialize: function () {
this.stories = new Stories();
this.story = new Story();
},
render: function () {
console.log('stories - ' + this.stories.length);
console.log('current story title - ' + this.story.get('title'));
}
});
var app = new BaseView();