background preloader


Facebook Twitter

Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better. Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options.

Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. Default Text Support Chosen automatically sets the default field text ("Choose a country... ") by reading the select element's data-placeholder value. Note: on single selects, the first element is assumed to be selected by the browser.

No Results Text Support Setting the "No results" search text is as easy as passing an option when you create Chosen: Limit Selected Options in Multiselect You can easily limit how many options the user can select: Right to Left Support. Resources for getting started with Backbone.js. The current product I am building makes heavy use of HTML5 & javascript to give the user a rich experience, both on and offline, across a variety of screens. Before I even started this application I knew I wanted a clean and proven approach to help manage the complexity on the client. After reviewing several js frameworks I decided to go with backbone.js (compare yourself). I have been working with backbone for several months and I am really happy with it, and would recommend to anyone building similar types of javascript applications.

As per the project description: “Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.” Updated: That’s all for now. Jarod Ferguson. Centre de Formation Adobe - Wiki. Backbone.js est une librairie javascript open source développée par Jeremy Ashkenas, également créateur de CoffeeScript.

Elle permet de structurer votre code javascript en proposant plusieurs “classes” la View dans laquelle vous allez poser des écouteurs sur les différents éléments du DOM et modifier ces derniers la Collection et Model qui représentent les données à manipuler : liste d'utilisateurs, éléments d'un panier d'achat, liste de tâches … Il ne s'agit pas réellement d'une approche MVC dans le sens classique, mais on y retrouve l'esprit de séparation des responsabilités qui permet une grande souplesse dans les évolutions et la maintenance du code. Backbone propose également une connexion REST entre les models et le serveur de manière à ce que la mise à jour des models soit simple.

Sample App with Backbone.js and Twitter Bootstrap. Backbone.js is a lightweight JavaScript framework that provides the basic infrastructure (Model, Collection, View, and Router classes) to bring structure to your Web applications. Twitter Bootstrap is a UI toolkit that provides simple and flexible HTML, CSS, and Javascript to implement popular user interface components and interactions. In other words, Backbone.js and Twitter Bootstrap focus on different areas of your application: core architecture and user interface respectively. Because of their well-defined and non-overlapping scope, Backbone.js and Twitter Bootstrap work well together. In general, I find a lightweight architectural framework and a UI toolkit to be a powerful combination, and an interesting alternative to full-stack frameworks: it gives you the flexibility to choose the library you like (if any) in the respective areas of your application.

The Sample Application You can run the application here. Twitter Bootstrap highlights Backbone.js highlights One-to-Many association. Extensions, Plugins, Resources · documentcloud/backbone Wiki. Dependencies Underscore.js Backbone's only hard dependency. JSON2.js Needed if you'd like to parse and serialize JSON in older browsers (read: "Internet Explorer") jQuery Recommended for DOM manipulation and Ajax. Lo-Dash A performance-minded Underscore alternative with customs builds and additional features. Zepto A jQuery alternative for mobile apps NB: Zepto isn't fully compatible with jQuery, use at your own risk Backbone.Native A tiny drop-in replacement for jQuery to allow Backbone to work while relying on only native DOM APIs. Exoskeleton A faster and leaner Backbone for your HTML5 apps. Backbone fork with 100% optional dependencies, speed improvements and other enhancements. Development Tools Backbone Eye A Firebug extension to debug Backbone based applications running off web-browsers.

Backbone Debugger Model View. Organizing your application using Modules (require.js) - Backbone.js Tutorials. Unfortunately Backbone.js does not tell you how to organize your code, leaving many developers in the dark regarding how to load scripts and lay out their development environments. This was quite a different decision to other JavaScript MVC frameworks who were more in favor of setting a development philosophy. Hopefully this tutorial will allow you to build a much more robust project with great separation of concerns between design and code.

This tutorial will get you started on combining Backbone.js with AMD (Asynchronous Module Definitions). What is AMD? Asynchronous Module Definitions designed to load modular code asynchronously in the browser and server. It is actually a fork of the Common.js specification. Many script loaders have built their implementations around AMD, seeing it as the future of modular JavaScript development. This tutorial will use Require.js to implement a modular and organized Backbone.js. I highly recommend using AMD for application development Quick Overview <!


Naming Backbone.js Code with Require.js. ‹prev | My Chain | next› One last bit of bookkeeping remains for my in my exploration of require.js with Backbone.js: file naming. As I have worked with the code in my calendar application, it has become apparent that I need a better way of naming files. The entire list of scripts is currently: javascripts ├── backbone.js ├── calendar │ ├── collections │ │ └── appointments.js │ ├── helpers │ │ ├── dayAfter.js │ │ ├── firstOfTheMonth.js │ │ ├── from_iso8601.js │ │ ├── template.js │ │ ├── to_iso8601.js │ │ └── weekAfter.js │ ├── models │ │ └── appointment.js │ ├── router.js │ └── views │ ├── Application.js │ ├── AppointmentAdd.js │ ├── AppointmentEdit.js │ ├── Appointment.html │ ├── Appointment.js │ ├── CalendarMonthBody.js │ ├── CalendarMonthDay.js │ ├── CalendarMonthHeader.js │ ├── CalendarMonth.js │ ├── CalendarMonthWeek.js │ ├── CalendarNavigation.js │ └── TitleView.js ├── calendar.js ├── css ├── jquery.min.js ├── jquery-ui.min.js ├── main.js ├── require.js ├── text.js └── underscore.js.

Organizing Your Backbone.js Application With Modules – Organizing Your Backbone.js Application With Modules – Bocoup Web Log. If you have spent any time looking at Backbone.js, like many others, you are probably amazed by how lightweight, flexible and elegant it is. Backbone.js is incredibly powerful, but not prescriptive in how it should be used. With great power comes great responsibility, and if you’ve tried to use Backbone.js for a large project you might be asking yourself: how do I organize my code? When thinking about “code organization” the questions you might be asking are: How do I declare and invoke Backbone types?

How do I manage a separation of concerns? All good questions! There’s been a lot of debate about this issue in the Backbone.js community for several reasons. Having said all this, let’s dive into some of the details. Here’s how you might layout your application structure: Static Assets Your static assets such as CSS, images and JavaScript libraries required by your code should go under a parent directory, such as the assets directory in our example above. Application code Index.html 3. Getting Started with Backbone.js. Unlike its web development peers, JavaScript has never really had much in the way of frameworks to provide structure. Thankfully, in recent years, that's beginning to change. Today, I'd like to introduce you to Backbone.JS, a sweet little library that makes the process of creating complex, interactive and data driven apps so much easier.

It provides a clean way to surgically separate your data from your presentation. Overview of Backbone.JS Created by Jeremy Ashkenas, the JS ninja who built CoffeeScript, Backbone is a super light-weight library that lets you create easy to maintain front ends. Backbone is a collection of cohesive objects, weighing in at a shade under 4kb, that lend structure to your code and basically helps you build a proper MVC app in the browser. Let's face it: the above is a little hard to parse and make sense of. Key-value binding and custom events Rich API of enumerable functions Views with declarative event handling Your days of writing spaghetti bind calls are over. Backbone.js Tutorials.

Thomas Davis. Back to home Backbone.js Tutorial – by noob for noobs The official website describes Backbone.js as a library to supply structure to Javascript heavy web applications. After using Backbone.js for a week I could never see myself building any sort of Javascript functionality regardless of size without using Backbone.js or alternatives. I have decided to write a quick introduction for those trying to grasp the mechanics behind it.

I am only a beginner also and would love suggestions and tips to improve my code. I am also very curious to hear what you think about how MVC ties into Javascript development and the most effective library you have used for logically organizing your Javascript. Would be great to get a discussion on MVC vs MVVM vs others etc leave comments at the bottom! Also could you implement this example better in another framework? Understanding the Model View Controller Paradigm I have used many frameworks which promote that they use MVC. Getting started <! Setting up the main view. 1.js.