Backbone.ModalDialog.js v0.3

Recently at work I gave my Backbone.js modal dialog a good run out on a fairly complex edit profile screen. Each distinct element of a user’s profile is editable separately in a modal dialog. I made a few changes along the way so now here’s the 0.3 release.

The changes in v0.3 are :

• Added option showModalAtScrollPosition (default true) to determine whether the modal dialog is displayed so it is visible in a scrolled viewport (a sensible default), or is displayed at the top of the document where it might be invisible if the window has been scrolled down.
• Fixed a problem where the opaque blanket div didn’t cover the entire screen when the window was scrolled. The modal blanket div’s height is recalculated every time a dialog is displayed (in case the window height has changed since last time).
• Added the recentre() function which you can call to recentre a modal dialog in case the content has changed. Useful if errors messages have been added for example. Americans can use recenter().
• Improved how the positioning works.
• The showModal() function now returns this.
• Added validation to the demo using Thomas Pederson’s excellent backbone.validation.js.

See the demo page live in action.

Javascript, UI

Backbone.ModalDialog.js v0.2

I’ve made a few changes to my Backbone.js modal dialog plugin. I’m using it in my own web app and I needed to make some changes and hopefully others will need them too.

Here’s a quick demo :

The new features are :

• Added option to render the modal dialog into a given container element allowing relative absolute positioning.
• Added option to slide the modal dialog down from above or up from below.
• You can now provide an css properties to be applied to the modal dialog.
• Clicking on a jQuery ui calender control no longer causes the modal dialog to close.
• Improved the default position of the modal dialog to be more central.

Happy modalizing.

PS: The YouTube video quality is quite poor isn’t it, looks ok outside of YouTube. What’s wrong with it? Can anyone recommend a YouTube compatible screen capture app?

Javascript, UI

Backbone.js collections can listen to their models’ changes

I wanted to know if Backbone.js collections can listen to their models’ events. It turns out they can. In your collection you just need to use the same binding mechanism that you would in a view.

	initialize:
  function() {
    this.on("change:name", this.changeName);
    this.on("change:age", this.changeAge);
  },
	

Here’s a JSFiddle test :

I looked in the Backbone.js source code and found where it happens :

	// Internal method called every time a model in the set fires an event.
// Sets need to update their indexes when models change ids. All other
// events simply proxy through. "add" and "remove" events that originate
// in other collections are ignored.
_onModelEvent : function(ev, model, collection, options) {
    if ((ev == 'add' || ev == 'remove') && collection != this) return;
    if (ev == 'destroy') {
        this._remove(model, options);
    }
    if (model && ev === 'change:' + model.idAttribute) {
        delete this._byId[model.previous(model.idAttribute)];
        this._byId[model.id] = model;
    }
    this.trigger.apply(this, arguments);
}
	

Javascript