Testing Backbone applications with Jasmine and Sinon – Part 3. Routers and Views – Tinned Fruit Overview This is the third and final part in a series of articles demonstrating how to test a Backbone.js application, employing the Jasmine BDD test framework and the Sinon.JS spying, stubbing and mocking library If you haven’t yet read the first or second parts, take a look now. In this final part, we’ll be looking at some methods for unit testing Backbone routers and views. These object types both present their own unique challenges for testing, but and provide the tools we need to isolate them and fake external code and system dependencies. We will be examining the following: different approaches to testing Backbone routes methods for testing view rendering using DOM fixtures in your specs using the plugin testing view event handlers using fake timers to manipulate timed events Routers router objects are responsible for URL hash routing within your application, and can also be used for initialisation tasks if that’s how you choose to structure your code. Example 1: Testing routes Simple.
References, Routing, And The Event Aggregator: Coordinating Views In Backbone.js I recently found myself needing to facilitate communication between two backbone views. The first view is a medication – one that is currently being taken by a particular patient. The second view is the add/edit view that allows the patient to either add new medications or edit existing ones. When the edit icon is clicked for an existing medication, the edit form should be populated and the user should be able to edit the medication. Here’s what the screen looks like after I click on the edit icon (the pencil): There are a number of ways to make this work – the most basic of which is to have the views reference each other so that they can either call methods on each other or raise events. References I’ve done this a number of times and it works well. In this simple example, I have an event setup that listens to the edit icon click. In some cases, though, this isn’t really an option – or, it may be an option that would cause a little extra code and work to make sure it works correctly.
Integrating Devise with Backbone.js | Josh Huckabee For the impatient: view the code, or see the demo. Update 30 May 2012: The original version of the application and this article referenced the backbone.modelbinding project by Derick Bailey. Per the readme, that project has been abandoned and I have replaced backbone.modelbinding with the preferred backbone.modelbinder project. All code and referenced samples below have been updated accordingly. Several weeks ago I set out to create a single page web app leveraging Backbone.js on the front end with Ruby on Rails powering the back end. One of the first things I need on almost all new projects is a way to handle user registration, authentication, and authorization. Arguably, doing this is unnecessary as Devise ships with its own UI implementation. To implement the Devise UI in Backbone.js I started by creating 3 Backbone models, one each for authentication, registration, and password retrieval. UserRegistration: UserSession: UserPasswordRecovery: Here is the login view:
Payne Digital Ltd - Bootbox.js - alert, confirm and flexible dialogs for twitter's bootstrap framework UPDATE 01/02/2012: Version 2.0.0 of the Bootbox library is out. Whilst this tutorial is still largely accurate and version 1.1.2 will work with the 1.x series of Twitter's Bootstrap framework, you should check out the updated version here. This article discusses a GitHub repository – feel free to browse the code or follow the project. I’ve been using twitter's bootstrap framework for a number of site builds recently, mainly because it gets me from black-and-white markup to vaguely-presentable websites in a very small amount of time. Dialogs using Twitter Bootstrap You may be wondering why a few wrapper methods around bootstrap's built-in dialog capabilities are either necessary or desirable. Note that this example is purely for demonstration purposes - you probably don't want to show an obtrusive dialog as soon as the page loads! It's important to stress that none of these points are negative, nor are they particularly arduous. Bootbox.js Alerts Which results in the following dialog: