![]() ![]() Each view will be associated with a single model, and turn its properties into HTML. After this, we define a view for the services.In our case, as the items in the collection are predetermined, we will only listen for the change event (which is raised whenever the checked property is updated). In larger apps, you would listen for when items are inserted or removed from the collection, and update the views accordingly. It will make it easier to listen for events on all objects at once. Then we will create a Backbone collection that will store all the services.An object of this class will be created for every service that we offer It will have properties for the name of the service, the price, and checked - a status field showing whether this service has been chosen or not. Here is the overall idea of our Backbone code: Services Chooser Form With Backbone.js The JavaScript Last comes the script.js file, which you can see in the next section. The UL inside it will be populated with LI items for the services, and the span inside the #total paragraph will hold the price.īefore the closing tag, I have included jQuery, Backbone and the Underscore library (backbone depends on its powerful utility functions). The main element on the page is the form. Your first Backbone.js App | Tutorialzine ![]() I haven't added the HTML5 shim, so this might not look good in older IEs: index.html We are starting off with a regular HTML5 document. The app that we are building here is in the first camp, but it does show the fundamental concepts behind the framework. Backbone can also be an overkill for smaller applications, where a few lines of jQuery would suffice, so it would better be left for large code bases. Backbone does not replace and does not depend on jQuery, but the two work together nicely.īackbone won't magically solve your problems though - you still have to be smart in the way you organize your code, which can be an issue if you don't have prior experience with MVC frameworks. In this tutorial we won't be using the advanced features of the library - everything will be stored client-side. It connects your application to your backend via a RESTful JSON interface, and can automatically fetch and save data. What is Backbone.js?īackbone.js is a library that gives structure to web applications by providing models, collections and views, all hooked up together with custom events. Update: We now have a version of this form using AngularJS. ![]() A total price field is going to be calculated in real-time with the aggregate price of the services. Today we are going to make a service chooser form with Backbone.js, that lets you choose a set of items from a list. Backbone.js is one of the most popular and is quickly becoming the go-to choice when considering such a framework. These frameworks let you organize your JavaScript using the proven MVC pattern. Client-side MVC frameworks have gotten increasingly popular with the raise in complexity of in-browser web apps. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |