Backbone is a MVC like framework, this project is about building out Classes and Controls for use in a mobile project using JQuery and Backbone in OOP/OOD. BroadStreet is a Backbone.js Mobile Framework.
JavaScript Ruby
Latest commit 0ac9048 Sep 4, 2012 Darren Hurst hearderBar navagation


Backbone-JQUERY-Mobile Controls.

See the BroadStreet Example =

Example Example


With a custom alert.js for IOS style notification!



A Backbone.js and Require.js Boilerplate by Greg Franko was used to demo these controls. These controls give you "Jquery Mobile" like controls but using only Jquery and Backbone.

Follow Greg Franko - for the initial Boilerplate used in this project for more information on setting up the boiler.

Broadstreet Mobile is a Mobile Development Company in Toronto Canada.

Getting Started

  1. Clone this repository
  2. Download and install Node.js (this is used to run the Require.js Optimizer)
  3. Download, install, and start a local web server (eg. XAMPP). Make sure to put this repository in your local web server's public folder (eg. htdocs).

    Note: A local web server is required because Backbone-Require-Boilerplate dynamically pulls in an HTML dependency (a template), and IE and Chrome have local security restrictions that do not allow this action. If you don't want to download and install a local web server, then you should be able to test the code locally with Firefox. Keep in mind that if you remove the template, the code will work fine locally in all browsers.

  4. Enjoy using Backbone.js, Require.js, jQuery, Lodash, and Modernizr (enjoyment optional)
  5. Install Compass and start Compass Watch.

Control Set Types

Controls take the target Div, and for input controls - this [view scope] for valueChange event

Text Input

Button var Btn1 = new Button().render("controls_right"); Btn1.setText("Click For Page 2"); Btn1.setEvent(this,"alertButton");

Usage var TextInput = new Input("controls",this).render();
TextInput.setTitle("Your Name");

Selection Input

Usage var Selection1 = new Selection("controls",this).render();
Selection1.setTitles("selection","make a selection");

Toggle Input

Usage var Toggle1 = new Toggle("controls",this).render();
Toggle1.setTitle("Do you like this?");

Message View

Usage var Msg1 = new Msg("controls",this).render();
Msg1.setTitle("Do you like this?");

Label View

Usage var Label1 = new Label("controls",this).render();
Label1.setLabel("label takes html");


Darren Hurst - BroadStreet Mobile
Connect on LinkedIn

Lucas Koolma - BroadStreet Mobile

Lyle Resnick - BroadStreet Mobile



Copyright (c) 2012 BroadStreet Mobile Licensed under the MIT license.