Create a gist now

Instantly share code, notes, and snippets.

@cuppster /1.js
Created Aug 29, 2012

What would you like to do?
Updating Views with Events, Models and Rivets
// ## Header View
//
var HeaderView = Backbone.View.extend({
// model backing the view
model: new (Backbone.Model.extend({
defaults: {
hasUpdate: false,
}
})),
initialize: function() {
var view = this;
// receive updated information from anywhere
// and set on the model
$('body').on('updateHeader', function(e, data) {
view.model.set(data);
});
// rivet things together
rivets.bind(view.$el, {status: view.model});
}
});
// ## App View
//
var AppView = Backbone.View.extend({
events: {
'click #uptodate' : function() {
this.$el.trigger('updateHeader', { hasUpdate: false } );
},
'click #outofdate' : function() {
this.$el.trigger('updateHeader', { hasUpdate: true } );
}
},
...
<body>
<header>
<h2>Status: </h2>
<ul>
<li data-rv-hide="status.hasUpdate" rel='status'>Up to Date</li>
<li data-rv-show="status.hasUpdate" rel='status'>I'm Out of Date</li>
</ul>
</header>
<button id='uptodate'>Set Up to Date</button>
<button id='outofdate'>Set Out of Date</button>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment