Backbone.js why use

If you define an initialize function, it will be invoked when the collection is created. There are a couple of options that, if provided, are attached to the collection directly: model and comparator. Pass null for models to create an empty Collection with options. Usually you'll want to use get , at , or the Underscore methods to access model objects, but occasionally a direct reference to the array is desired.

This can be used to serialize and persist the collection as a whole. Underscore Methods 46 Backbone proxies to Underscore. Most methods can take an object or string to support model-attribute-style predicates or a function that receives the model instance as an argument.

If a model property is defined, you may also pass raw attributes objects and options, and have them be vivified as instances of the model using the provided options. Returns the added or preexisting, if duplicate models. Note that adding the same model a model with the same id to a collection more than once is a no-op. Each model can be a Model instance, an id string or a JS object, any value acceptable as the id argument of collection.

The model's index before removal is available to listeners as options. Use reset to replace a collection with a new list of models or attribute hashes , triggering a single "reset" event on completion, and without triggering any add or remove events on any models. Returns the newly-set models. For convenience, within a "reset" event, the list of any previous models is available as options. Pass null for models to empty your Collection with options.

Here's an example using reset to bootstrap a collection during initial page load, in a Rails application:. Calling collection. If a model in the list isn't yet in the collection it will be added; if the model is already in the collection its attributes will be merged; and if the collection contains any models that aren't present in the list, they'll be removed.

All of the appropriate "add" , "remove" , and "change" events are fired as this happens. Returns the touched models in the collection. Useful if your collection is sorted, and if your collection isn't sorted, at will still retrieve models in insertion order.

When passed a negative index, it will retrieve the model from the back of the collection. Takes the same options as add.

Takes the same options as remove. If you define a comparator, it will be used to sort the collection any time a model is added.

A comparator can be defined as a sortBy pass a function that takes a single argument , as a sort pass a comparator function that expects two arguments , or as a string indicating the attribute to sort by. Note that Backbone depends on the arity of your comparator function to determine between the two styles, so be careful if your comparator function is bound. Note how even though all of the chapters in this example are added backwards, they come out in the proper order:.

Collections with a comparator will not automatically re-sort if you later change model attributes, so you may wish to call sort after changing model attributes that would affect the order. Note that a collection with a comparator will sort itself automatically whenever a model is added. Calling sort triggers a "sort" event on the collection.

Equivalent to calling map and returning a single attribute from the iterator. Useful for simple cases of filter. If no model matches returns undefined. Models within the collection will use url to construct URLs of their own.

The function is passed the raw response object, and should return the array of model attributes to be added to the collection. The options hash takes success and error callbacks which will both be passed collection, response, options as arguments. Delegates to Backbone. The server handler for fetch requests should return a JSON array of models. The behavior of fetch can be customized by using the available set options. For example, to fetch a collection, getting an "add" event for every new model, and a "change" event for every changed existing model, without removing anything: collection.

Note that fetch should not be used to populate collections on page load — all models needed at load time should already be bootstrapped in to place. Equivalent to instantiating a model with a hash of attributes, saving the model to the server, and adding the model to the set after being successfully created.

Returns the new model. If client-side validation failed, the model will be unsaved, with validation errors. In order for this to work, you should set the model property of the collection. The create method can accept either an attributes hash and options to be passed down during model instantiation or an existing, unsaved model object. Creating a model will cause an immediate "add" event to be triggered on the collection, a "request" event as the new model is sent to the server, as well as a "sync" event, once the server has responded with the successful creation of the model.

Collection and any collections which extend it. This can be used to add generic methods e. Web applications often provide linkable, bookmarkable, shareable URLs for important locations in the app. Router provides methods for routing client-side pages, and connecting them to actions and events. For browsers which don't yet support the History API, the Router handles graceful fallback and transparent translation to the fragment version of the URL. During page load, after your application has finished creating all of its routers, be sure to call Backbone.

Define action functions that are triggered when certain URL fragments are matched, and provide a routes hash that pairs routes to actions. Note that you'll want to avoid using a leading slash in your route definitions:. Trailing slashes are treated as part of the URL, and correctly treated as a unique route when accessed. When the visitor presses the back button, or enters a URL, and a particular route is matched, the name of the action will be fired as an event , so that other objects can listen to the router, and be notified.

Router [options] For use with routers as ES classes. If you define a preinitialize method, it will be invoked when the Router is first created and before any instantiation logic is run for the Router. All options will also be passed to your initialize function, if defined. Each matching capture from the route or regular expression will be passed as an argument to the callback.

The name argument will be triggered as a "route:name" event whenever the route is matched. If the callback argument is omitted router[name] will be used instead. Routes added later may override previously declared routes. If you also wish to call the route function, set the trigger option to true. To update the URL without creating an entry in the browser's history, set the replace option to true.

Return false from execute to cancel the current transition. Override it to perform custom parsing or wrapping of your routes, for example, to parse query strings before handing them to your route callback, like so:.

History serves as a global router per frame to handle hashchange events or pushState , match the appropriate route, and trigger callbacks. You shouldn't ever have to create one of these yourself since Backbone.

Older browsers that don't support pushState will continue to use hash-based URL fragments, and if a hash URL is visited by a pushState -capable browser, it will be transparently upgraded to the true URL. Note that using real URLs requires your web server to be able to correctly render those pages, so back-end changes are required as well.

For full search-engine crawlability, it's best to have the server generate the complete HTML for the page Subsequent calls to Backbone. When called, if a route succeeds with a match for the current URL, Backbone. If no defined route matches the current URL, it returns false. If the server has already rendered the entire page, and you don't want the initial route to trigger when starting History, pass silent: true.

By default, it uses jQuery. With the default implementation, when Backbone. When returning a JSON response, send down the attributes of the model that have been changed by the server, and need to be updated on the client. When responding to a "read" request from a collection Collection fetch , send down an array of model attribute objects.

Whenever a model or collection begins a sync with the server, a "request" event is emitted. If the request completes successfully you'll get a "sync" event, and an "error" event if not. The sync function may be overridden globally as Backbone.

As an example, a Rails 4 handler responding to an "update" call from Backbone might look like this:. One more tip for integrating Rails versions prior to 3. Backbone views are almost more convention than they are code — they don't determine anything about your HTML or CSS for you, and can be used with any JavaScript templating library.

The general idea is to organize your interface into logical views, backed by models, each of which can be updated independently when the model changes, without having to redraw the page. Instead of digging into a JSON object, looking up an element in the DOM, and updating the HTML by hand, you can bind your view's render function to the model's "change" event — and now everywhere that model data is displayed in the UI, it is always immediately up to date.

You'll want to override the render function, specify your declarative events , and perhaps the tagName , className , or id of the View's root element. Properties like tagName , id , className , el , and events may also be defined as a function, if you want to wait to define them until runtime. If you define a preinitialize method, it will be invoked when the view is first created, before any instantiation logic is run. If the view defines an initialize function, it will be called when the view is first created.

In this fashion, views can be rendered at any time, and inserted into the DOM all at once, in order to get high-performance UI rendering with as few reflows and repaints as possible. If none are set, this. An el reference may also be passed in to the view's constructor.

A handy reference instead of re-wrapping the DOM element all the time. If you use this scoped jQuery function, you don't have to use model ids as part of your query to pull out specific elements in a list, and can rely much more on HTML class attributes. It's equivalent to running: view. In this way, when rendering your view, you have convenient access to instance data. For example, using Underscore templates:. Override this function with your code that renders the view template from model data, and updates this.

A good convention is to return this at the end of render to enable chained calls. Backbone is agnostic with respect to your preferred method of HTML templating. Your render function could even munge together an HTML string, or use document. However, we suggest choosing a nice JavaScript templating library.

Because Underscore. Backbone will automatically attach the event listeners at instantiation time, right before invoking initialize. If an events hash is not passed directly, uses this. The callback may be either the name of a method on the view, or a direct function body. Omitting the selector causes the event to be bound to the view's root element this. By default, delegateEvents is called within the View's constructor for you, so if you have a simple events hash, all of your DOM events will always already be connected, and you will never have to call this function yourself.

The events property may also be defined as a function that returns an events hash, to make it easier to programmatically define your events, as well as inherit them from parent views. Using delegateEvents provides a number of advantages over manually using jQuery to bind events to child elements during render.

All attached callbacks are bound to the view before being handed off to jQuery, so when the callbacks are invoked, this continues to refer to the view object. When delegateEvents is run again, perhaps with a different events hash, all callbacks are removed and delegated afresh — useful for views which need to behave differently when in different modes. A single-event version of delegateEvents is available as delegate.

In fact, delegateEvents is simply a multi-event wrapper around delegate. A counterpart to undelegateEvents is available as undelegate. Useful if you want to disable or remove a view from the DOM temporarily. You can use the return value of Backbone. Useful for embedding Backbone on third-party websites, where you don't want to clobber the existing Backbone. Why use Backbone, not [other framework X]? If your eye hasn't already been caught by the adaptability and elan on display in the above list of examples , we can get more specific: Backbone.

In fact, Backbone. For example References between Models and Views can be handled several ways. Some people like to have direct pointers, where views correspond with models model. Others prefer to have intermediate "controller" objects that orchestrate the creation and organization of views into a hierarchy. Others still prefer the evented approach, and always fire events instead of calling methods directly.

All of these styles work well. Batch operations on Models are common, but often best handled differently depending on your server-side setup. Some folks don't mind making individual Ajax requests. Feel free to define your own events. Events is designed so that you can mix it in to any JavaScript object or prototype. Since you can use any string as an event, it's often handy to bind and trigger your own custom events: model.

Render the UI as you see fit. Backbone is agnostic as to whether you use Underscore templates , Mustache. Sometimes you'll create a view for each model Both can be appropriate in the same app, depending on the quantity of data involved, and the complexity of the UI.

For example, consider a Mailbox model that contains many Message models. One nice pattern for handling this is have a this. If you're looking for something more opinionated, there are a number of Backbone plugins that add sophisticated associations among models, available on the wiki.

Backbone doesn't include direct support for nested models and collections or "has many" associations because there are a number of good patterns for modeling structured data on the client side, and Backbone should provide the foundation for implementing any of them.

You may want to…. Loading Bootstrapped Models When your app first loads, it's common to have a set of initial models that you know you're going to need, in order to render the page. Instead of firing an extra AJAX request to fetch them, a nicer pattern is to have their data already bootstrapped into the page. You can then use reset to populate your collections with the initial data.

Extending Backbone Many JavaScript libraries are meant to be insular and self-enclosed, where you interact with them by calling their public API, but never peek inside at the guts.

Because it serves as a foundation for your application, you're meant to extend and enhance it in the ways you see fit — the entire source code is annotated to make this easier for you.

You'll find that there's very little there apart from core functions, and most of those can be overridden or augmented should you find the need.

If you catch yourself adding methods to Backbone. It launches callbacks to control events and enables routing in the web app. In this case developers have no need to create any special event, because History has already them:. Sync is the fundamental function of Backbone that allows to check and save the model to the server site of a web app. On the other hand, a developer may override it to use another suitable app for project strategies:. While you need to develop one-page Java app, Backbone would come in hand.

Model View framework would help much more, than just structuring your Javascript architecture to avoid spaghetti code model. Hence, Backbone would solve many annoying problems you may face in the end of large app development. So, when is Backbone. JS requires to be used? Normally, most of web app data contain the server side. Meantime, client-side JavaScript has limited solutions to solve this problem. But with Backbone. Js things have changed. It downloads raw data from server side of the web app and renders it into browser whatever it is required.

Backbone uses one view in order to control multiple sub-views that share required models. It helps save time, increase code readability and simplify any recoding in future. As a result, it gets in hand when developers try to build complex projects with large interactive and multifunctional user interface.

Meantime, most of developers strongly suggest to do that in all cases, except for models that are not created with references to their views. So, all models and collections, all of data layers in the end should be clearly separated to the views that they belong to. Therefore it would help in code navigation and save time if any recording or bug fixing would be required in future. So, a designed application would download just one payload that includes all required scripts, styles and marks.

Everything a user needs to make simple actions would be in one place. As a result, there are no requirements for any additional background activity. For example, Gmail is easy to switch between reading your income mails and answering to them, because no additional request to server has place there. So, as it was said above, when building one page an app developer is strongly required to structure code in order to save time in the end.

As a result, developers with some experience in JavaScript sooner or later would start seeking any MVC framework. And Backbone would be the first thing they notice. It is a tiny sized, mature framework with strong community and documentations behind. But, why any Backbone like framework is required in the first place? Because, without it a developer would start receiving problems from many things:. Finally, in essence the Backbone. Js provides comfortable options to structure code better.

It makes differences between data and its views that render data. It is simply all about that. Project weight is really important when we talk about downloading speed and mobile responsive web app.

In this case Less is More for sure. So, Backbone is a perspective framework in all web development fields. Extensibility is the main idea of the whole Backbone framework.

So it includes tons of small libraries that are suitable for specialized needs. Moreover, there is always possibility to create your own MVC framework. Documentation and API. Since 0. However, it can be still easily learned, because of many things:. MV Structure. Model all that things are already "in the box" you just need to apply your own strategies of implementation.

You typically don't deal with one instance of model. You need to group the models into collections. Collection similar to model are able fetch and persist itself, all it needs to know is the actual type of Model and URL.

This is where Backbone. Collection shies. You are keeping all models close together, if some model become destroyed the collection will be updated, so it always in consistent state. With view is basically render your models as DOM structure. So, the Backbone. View is abstraction with primarily method - render. Backbone does not say, how exactly you are going to do that. Instead, it provides you convenient methods for listening to view events like clicks, focusout or any other DOM supported events.

Inside the handlers you either could update related model or apply some changes to view parts, whatever. And finally Backbone. SPA's most popular example is GMail. You browsing emails, writing and sending - without and page reloads. What's changing is only hash part of URL like inbox, sent, all.

Router is handling hash change events and triggers registered handler. Inside the handler, you can initialize the corresponding application. Now, please let me know. How many times did you create read copy-n-paste the code for RESTful data persistence? How many times, you did you create code for validation? How many hours you spend for looking for some event listener provoking the bug in your app and hiding somewhere among If your answer, more that 2 - stop doing that.

Don't repeat yourself - reuse.