JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<div class="container">
<div class="row">
<div class="col-md-1">
<button id="start">start</button>
<button id="stop">stop</button>
<ul id="results">
</ul>
</div>
</div>
</div>
<script type="text/template" id="stat-template">
<%- stats %>
</script>
CSS
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
JavaScript
var myModel = Backbone.Model.extend({
defaults: function(){
return {
stats: [],
intervalId: ''
}
}
});
var collection = Backbone.Collection.extend({
model: myModel,
initialize: function() {
}
});
var MainView = Backbone.View.extend({
el: ('.container'),
events: {
'click #start' : 'startInterval',
'click #stop' : 'stopInterval',
},
initialize: function(){
c = new collection({});
//this.render();
},
render: function(){
c.each(this.addChart, this);
},
addChart: function(chart){
var view = new D3View({model: chart});
this.$("#d3results").append(view.render().el);
},
startInterval: function(){
if (this.model){
console.log(this.model, "this.model in Start before create");
}else{
console.log("no model");
}
this.model = new myModel();
console.log(this.model, "this.model in StartInterval");
this.model.intervalId = setInterval(this.addToModel.bind(this), 1000);
console.log(this.model.intervalId, "id");
},
stopInterval: function(){
console.log(this.model, "this.model in sI");
clearInterval(this.model.intervalId);
var modelstats = this.model.get("stats");
console.log(modelstats, "ms");
this.addToCollection();
},
addToModel: function(){
var arr = this.model.get("stats");
var num = Math.floor((Math.random() * 10) + 1);
console.log(num,"num");
var view = new StatView({model: this.model});
arr.push(num);
this.model.set({"stats" : arr });
},
addToCollection: function(){
c.add(this.model);
console.log(c.length, "collection.length");
}
});
var StatView = Backbone.View.extend({
initialize:...