Backbone which template

In the list of project templates, select ASP. Name the project and click OK. Press Ctrl-F5 to build and run the application without debugging, or press F5 to run with debugging. Let's starts with the client side. The application is written in TypeScript. Application is defined in application. This object initializes the application and acts as the root namespace.

It maintains configuration and state information that is shared across the application, such as whether the user is signed in. The application. Next, it creates the default router and checks whether any client-side URL is specified. If not, it redirects to the default url! Events are always important when developing loosely coupled components. Applications often perform multiple operations in response to a user action. Backbone provides built-in events with components such as Model, Collection, and View.

The events object is a singleton. The following code shows how to subscribe to an event and then trigger the event:. In Backbone. The template defines a single router, in router. The router creates the activable views and maintains the state when switching views. Activable views are described in the next section. Initially, the project has two dummy views, Home and About. It also has a NotFound view, which is displayed if the route is not known.

There are two kinds of views, activable views and modal dialog views. Activable views are invoked by the router. When an activable view is shown, all other activable views become inactive.

To create an activable view, extend the view with the Activable object:. Extending with Activable adds two new methods to the view, activate and deactivate. JavierBuzzi thanks, looking through your fiddle helped me fix mine and now everything seems to work very well! Add a comment. Active Oldest Votes. Improve this answer. Thanks, I put the template tags and I'm rendering my collection now with.

I needed to add some other stuff like rendering the view after the collection is reset. Now everything seems just right. MattiaProcopio please check answer as correct if it was helpful, thanks. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown.

The Overflow Blog. Collections are ordered sets of models. You can bind "change" events to be notified when any model in the collection has been modified, listen for "add" and "remove" events, fetch the collection from the server, and use a full suite of Underscore. Any event that is triggered on a model in a collection will also be triggered on the collection directly, for convenience. This allows you to listen for changes to specific attributes in any model in a collection, for example: documents.

Collection , providing instance properties , as well as optional classProperties to be attached directly to the collection's constructor function.

If defined, you can pass raw attributes objects and arrays and options to add , create , and reset , and the attributes will be converted into a model of the proper type using the provided options, if any. A collection can also contain polymorphic models by overriding this property with a constructor that returns a model. Useful for combining models from multiple tables with different idAttribute values into a single collection. By default returns the value of the attributes' idAttribute from the collection's model class or failing that, id.

If your collection uses a model factory and those models have an idAttribute other than id you must override this method. Collection [models], [options] For use with collections as ES classes. If you define a preinitialize method, it will be invoked when the Collection is first created and before any instantiation logic is run for the Collection.

Collection [models], [options] When creating a Collection, you may choose to pass in the initial array of models. The collection's comparator may be included as an option. Passing false as the comparator option will prevent sorting. 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.