Thx a lot Mind blowing answer to say the least While u have explained almost all of the pieces, i just had one question So could u pls provide an example as to how i can persist my data across several pages in my app? Also i use Java in the server side which brings the actual dyanamic data So should i also update that to return me data in the correct format and then keep a copy of it as Backbone model Backbone allows you to change your views while still on the same page, so just use 1 page.
Does Backbone not have any mechanism to persist the data across pages? Like persisting the data through an AJAX call or something Added some info on persisting data, which Backbone does handle quite well. Well said Josh, you explained it better than me. Testndtv, since you seem to be a beginner at javascript, I would add the warning that backbone really isn't a very beginner friendly framework - it's very useful and helps a lot when building complex apps, but the extra concepts make starting development harder than just hacking away.
I would recommend you study the examples from backbone documentation carefully, so you get started in the right direction. Show 2 more comments. The characteristics of a typical backbone app are: Essentially static html page, with nothing generated on the server Server acts as a json REST api, which provides the content for the app The dom elements to display the data are created with javascript in backbone views, using jQuery and various templating libraries to help Communication with the server as well as between different parts of the app is done through the backbone models Regarding your question about keeping the data synced across multiple pages, my instinctive answer is that you don't need multiple pages: the user may perceive that the page is changing, the address in the url bar changes thanks to pushState functionality, but technically the entire app is one page.
OlliM OlliM 6, 1 1 gold badge 33 33 silver badges 45 45 bronze badges. The single page app means that it's technically one html page - from the users perspective it usually has multiple views "pages" and functions. As an example I can give the mobile linkedin pages touch. Edit: What backbone does is move some of the MVC stuff normally handled on the server and move them to the client. Mark Mark Community Bot 1 1 1 silver badge. 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. Does ES6 make JavaScript frameworks obsolete? Podcast Do polyglots have an edge when it comes to mastering programming Featured on Meta. Now live: A fully responsive profile. Linked 6. Related Hot Network Questions. Question feed. Right-click on the Scripts folder and select "Add".
Add the following code: window. Next Recommended Reading. Windows 10 Vs Windows Visual Studio Vs Visual Studio Understanding Matplotlib With Examples. Understanding Numpy With Examples.
C Evolution. Everything That Every. The saveClicked method handles the actual event. This function contains the code to handle the click and responds accordingly. Retrieving the data that a user has input into the form is as easy as running a jQuery selector to get the. In fact, that's exactly what you do, with one difference. This works in the current Backbone.
In an application as simple as this one, using a CSS ID which is supposed to be unique throughout the entire DOM , there's little chance of this not find the value that you expect. But this presents a problem in other common scenarios. Say the input is using a name attribute instead of an id :. If there is more than one element in the DOM with a name of name , it returns multiple DOM items and possibly gives you the wrong value. View solves this problem with one very small addition to the selector syntax:.
Did you notice the difference? It's the addition of this. This one little change does something very important for the Backbone. By using this. If you have 10 different forms on the screen, and each of them has an input element that matches this selector, this view instance only returns the data for the one that it controls. Given the use of this. There isn't anything particularly noteworthy in this code.
You're merely preventing the browser from submitting the form by itself and then gathering the data in to an object literal. From here, you'll need to do something with the data, such as sending it to a server for storage in a database of some sort, and displaying the new contact in the app's contact list.
The Backbone. A Backbone. Model is a representation of your application's models or entities in the browser. It is a data structure that contains at least a minimal amount of behavior for loading, modifying, saving, and deleting data using an API on your server. A Model is defined very similarly to a View.
You start by extending a Backbone. Model and assign the result to a variable. This creates a new object type that can be instantiated as needed, with each instance containing its own data. Model instance is often correlated to a server-side model or database record, although this isn't always the case. Next, you need to create a Contact model for this application to use, passing an object literal into the extend method:.
Within the Model declaration, options and other configuration can be provided. This pattern says that an entity or model should know about its state, relative to the data store. In the case of a Backbone. Back in the add form's saveClicked method, create a new instance of a Contact model. Then call the. The save method also takes in a second parameter of an object literal. This parameter can contain any needed configuration for the save method, including callbacks for the jQuery.
The model instance knows that it is a new model because there is no. It also uses the provided options for the AJAX call and other behavior changes.
The wait option tells Backbone. By default, this parameter is false. That means a call to. The one major difference is that the first parameter is not a raw object literal of data returned from the server. Instead, it is the model instance. From here, the updateList function needs to be updated to work with a Backbone. Model instead of a raw object literal. To make this easier, a Backbone. Collection will be introduced for managing the list of Contact objects. Collection is a collection like you would expect in most other languages and frameworks.
You can add and remove items, sort them, find a specific sub-set that match criteria, iterate through the items, and more. In Backbone, a Collection is specifically a collection of Model instances, and instances of the same type. By default, those instances are just Backbone. Model instances directly. But a Collection can be told to work with a specific type of model, easily. Collections also provide some convenience features for loading and working with Models, through the server API.
You can load an entire collection, for example, with one method call. There are easy ways to save an entire collection, as well, though this is not built in to Collections at the time of writing this. Since you already have a Contact, and you now need to manage list of contacts, create a collection called ContactCollection and configure it to use the Contact model like this:.
Notice the same pattern for creating this type, as with View and Model: calling the. Specifying a model: attribute on the configuration tells the Collection instances what type of Model it will be working with. Any time you add a model or fetch model from a server, it is converted to this type, if it is not this type already. Before you update the list of contacts with the one that was just added, it would be good to have the list rendered in the browser. That way, when you add a new contact, you'll see it right away.
For this, you'll need a ContactListView. It will have a similar rendermethod as the AddForm, but the rendering will be done in a loop - once for each model in the collection that the view references. Listing 2 shows the complete ContactListView. Note that this view did not extend from a special or different view type. It extended from Backbone. View, the same as the AddForm. This is the base view type that all views in a Backbone. Second, there is a new option in this view, tagName.
When a Backbone. This is how the view always has a DOM element to work with, even before the view has been rendered. This can be changed to any tag name you want, though, by specifying the tagName attribute on the view. In this case, the view is rendering a list of Contacts, so it makes sense that it would render using a ul for a list.
The majority of the code is the same as rendering the AddForm. The one major difference is that the template rendering has been placed in to an iterator on the view's collection. Instead of re-compiling the template in every iteration, the template is compiled once at the beginning of the method.
Then the pre-compiled template is executed with the data for each of the contacts. After each contact is rendered, the results are pushed in to an Array. You create an instance, passing any needed options to it, and then render it.
Since the ContactListView is supposed to display Contacts, and since it expects to have a collection attached to it, you'll want to pass a ContactCollection instance to the view instance.
For demonstration purposes, pre-populate the ContactCollection instance with some sample data, hard coded in to the constructor of the collection, as shown in Listing 3. Note that when you created the ContactCollection instance, you passed in an array literal, with three separate objects in the array. Each of the objects contains the data for a Contact, with an id, name, etc.
The three objects in the array are parsed and processed in to Contact instances, creating a ContactCollection instance that has three Contacts. The contacts collection is passed to the view, using the collection attribute on the constructor parameters. Like a Model, the View will recognize the presence of a Collection and appropriately attach it to the view for use.
This collection is used in the view's render method to produce the desired list. The last thing you need to do with the ContactListView is handle adding a new Contact to the collection.
This is done with event bindings from the collection itself, within the view. There is no simple event configuration object for this, though. The event handlers must be added in the view's initialize method - the method that executes just after the object has been constructed - as shown in Listing 4. The other option is the. The difference is in how the relationship between the event triggering object and the event subscribing object is handled. With the tendency for Views to be quick lived - that is, for them to be created, shown and destroyed - in comparison to models, it is generally better to use the.
By using. In the initialize method, the "add" event from the collection is handled, setting up the view's "contactAdded" method as a callback. Any time a new model is added to the collection that was passed to the view, the "add" event triggers. If a ContactListView instance is around when this happens, the "contactAdded" method will handle the event, and re-render the list. With the ContactCollection and ContactListView in place, you can get back to the workflow of adding a Contact to the application, and updating the list.
Look back at the success callback from the AddForm's call to save a new contact. In this method, a call to an updateList method is made. Previously, this method took the data from the form and added it to the DOM manually. Rather than manually passing the new model around, all that needs to happen is for the contact to be added to the collection. The easiest way to make this happen is to delete the updateList method entirely, and change how the AddForm works slightly.
Instead of creating a new Contact directly, the ContactCollection's. This method works in the same basic way as the model's save method. In addition to creating and saving the model, though, it also adds the model directly to the collection, firing the "add" event.
The success callback no longer calls out to the updateList method. Since the new contact is immediately added to the collection, the ContactListView will receive the "add" event and will re-render itself, showing the new Contact.
With the AddForm expecting a collection to be available, though, you will need to change the instantiation of this view so that it receives the same ContactCollection instance as the ContactListView. Now you can add new contacts through the add form and they will automatically show up in the contact list. You can now add new contacts and they automatically show up in the list.
But more importantly, you have a well structured code base. The different responsibilities of the application have been pulled apart and then orchestrated together to create the desired functionality. Best of all, though, you did this without having to throw away any of your investment in writing jQuery code.
This was not an all-or-nothing endeavor. You were able to pick and choose the places where it was easy to bring in Backbone, and progressively move the application forward from there. There is more that can be done with Backbone, as well. Applications can grow much larger, introduction additional needs.
0コメント