![]() ![]() ![]() It provides you with all the essential components required for adding structure to your rich javascript-heavy applications, including a lightweight client to server synchronisation method which requires either jQuery or Zepto.js’s AJAX functionality. ![]() Update: The code associated with this post has been updated to use Backbone.js 0.5.3 and Underscore.js 1.2.1 Backbone.jsīackbone.js is a framework from DocumentCloud, which is known for it’s excellent documentation. One such framework that has recently grown in popularity is Backbone.js. These frameworks often achieve this structure by adding in layers of Models, Controllers, Views, and Events, most of the time performing synchronisation between the client and server using AJAX. Button clicked, you can access the button thatĬonsole.log("Searching for " + $("#example_input").Recently there have been a number of frameworks developed that allow you to add extra structure to your code when building rich javascript-heavy applications. Return this // for chaining, a Backbone's standard for render Load the compiled HTML into the Backbone "el" This.customOption = options.customOption Template: _.template($("#example_template").html()), The following example is an introduction to: For instance, to log a message whenever the numberOfPages changes, you could do: huckleberryFinn.on('change:numberOfPages', () => console.log('Page change!')) įor a more detailed introduction to the other Backbone classes, view their individual documentation pages. Models also have an event system that you can use to react when things happen to a Model. t('numberOfPages', 1) // changes numberOfPages to 1 fetch returns a promise (just like $.ajax ), which you can use to trigger actions once the fetch has completed.Īttributes can be accessed or modified by using the get or set methods: huckleberryFinn.get('numberOfPages') // returns 64 When we tell it to fetch, Backbone will use jQuery to make an AJAX request for the book's data. ![]() Because Backbone knows the idAttribute is isbn, it knows that the URL for our new Book is /book/0486403491. When we created a new Book we passed it an object, and Backbone uses this object as the initial "attributes" (the data) of the Model. To create a new sub-class of a Backbone class, you simply call the extend method of the original class, and pass it the instance properties and (static) class properties as objects: const MyModelClass = ().done(() => console.log('the jQuery promise way')) show different pages) in response to the URL changes.īefore we look at how to use each of these components, let's first take a quick look at Backbone's class system. Router - enables a "single page application" by allowing an application to trigger different logic (e.g. View - represents a single part of the user interface each View wraps an HTML DOM element, and provides structure for working with that element as well as convenience features like simple event binding. Model - represents a single data object, but adds additional functionalities not provided by native JavaScript objects, such as an event system and a more convenient way to retrieve and send data to a remote serverĬollection - represents a set or "collection" of Models and provides functionalities to manage its models. Example of Using Backbone (Primarily Backbone.Model)īackbone.js is made up of four separate components: Collections, Models, Routers, and Views. The quickest way to get up and running with Backbone is to create an index.html file with simple script tags in the HTML : īackbone is now available for use in the page. Basic Setupīackbone requires Underscore and (optionally) jQuery - for DOM manipulation (using Backbone.View) and RESTful persistence. This means that the developer is given a lot of freedom to design the full experience of their application. Its goal is to provide these tools without dictating how to use them or what your use-case should look like. Model state is displayed with Views.īackbone attempts to provide the minimal set of data structure and user interface primitives that would be useful in a JavaScript web application. Data is represented as Models, which can be gathered into Collections. Backbone is a simple but robust client-side JavaScript library for building applications. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |