Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
#trigger {margin: 5em;}
<!DOCTYPE html>
<html>
<head>
<script src="//jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="//jashkenas.github.io/backbone/backbone-min.js"></script>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
$(function(){
var myModel = Backbone.Model.extend({});
var myCollection = Backbone.Collection.extend({
doStuff: function(){ alert("doing Stuff"); },
doOtherStuff: function(){ alert("doing other stuff"); }
});
var myCollectionView = Backbone.View.extend({
template: "<button id='trigger'>Trigger</button>",
initialize: function(){
this.listenTo(this.collection, 'sync', this.collection.doStuff);
this.listenTo(this.collection, 'sync', this.collection.doOtherStuff);
this.render();
},
events: {
"click #trigger": "trigger"
},
render: function(){
$("#app").html(this.template);
},
trigger: function(){
alert("triggering");
$(this).trigger("sync");
}
});
var mymodel = new myModel({}),
mycollection = new myCollection({
model: mymodel
}),
mycollectionview = new myCollectionView({
collection: mycollection
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment