Shulou(Shulou.com)06/02 Report--

Editor to share with you the example analysis of CRUD in Backbone.js Wine Cellar. I hope you will get something after reading this article. Let's discuss it together.

You will learn to create, update and delete (CRUD) wines.

HTTP method

URL

Operation

GET

/ api/wines

Retrieve all wines

GET

/ api/wines/10

Retrieve wines with id = = 10

POST

/ api/wines

Add new wine

PUT

/ api/wines/10

Update wines with id = = 10

DELETE

/ api/wines/10

Delete wine with id = 10

PHP versions of these services (using the Slim framework) will be provided with the download. This article will also provide a similar Java version of API (using JAX-RS).

Use Backbone.js with non-RESTful services

If your persistence layer cannot be provided through RESTful services, you can replace Backbone.sync. In this document:

"Backbone.sync is a function that is called every time Backbone attempts to read the model or save it to the server. By default, it uses (jQuery/Zepto). Ajax to make RESTful JSON requests. You can replace it to take advantage of different persistence strategies, such as WebSockets, XML transport, or local storage."

I won't discuss the use of non-RESTful services in this tutorial. For more information, see the documentation.

Add create, update, and delete functions

You can run the application that will be coded in this tutorial. The create, update, and delete features of this online version have been disabled.

The create, update, and delete features of this online version have been disabled.

Figure 2. Backbone.js code

Code focus

Wine (lines 2 to 14)

The second part adds two attributes to the wine model, as follows:

(1) urlRoot (line 3): the RESTful service terminal will retrieve or save the model data. Note that this property is only required when retrieving / saving a model independent of the collection. If the model is part of the collection, the URL property defined in the collection is sufficient for Backbone.js to know how to retrieve, update, or delete data using your RESTful API.

(2) Defaults (line 4): the default value used when creating a new instance of the model. This property is optional. However, this application needs to use this property to cause the wine-details information template to render an "empty" wine model object (this will happen when a new wine is added).

WineListView (lines 22 to 40)

When a user adds a new wine, you want it to automatically appear in the list. To do this, bind the view to the add event of the WineListView model (wine collection). When the event is triggered, the application creates a new instance of WineListItemView and adds it to the list.

WineListItemView (lines 42 to 62)

(1) when the user changes the wine, you want the corresponding WineListItemView to be automatically re-rendered to reflect the change. To do this, bind the view to a change event for its model, and then execute the Render function when the event is triggered. Similarly, when the user deletes the wine, you want to delete the list item automatically.

(2) to do this, bind the view to the destruction event of its model, and then execute our custom Close function when the event is triggered.

Important note: to avoid memory leaks and multiple event triggers, it is important to unbind the event listener before removing the list item from the DOM.

(3) Please note that no matter what happens, you do not have to bear the cost of re-rendering the entire list. You can only re-render or delete list items that are affected by the change.

WineView (lines 64 to 123)

In the spirit of encapsulation, event handlers for both Save and Delete buttons are defined within WineView, as opposed to defining them outside the "class" definition as free-hanging blocks of code. The Backbone.js event syntax is used, and the jQuery behind-the-scenes delegation mechanism is adopted.

You can always update the model in the following different ways depending on what the user enters in the form:

(1) the "real-time" method: use a change handler to update the model when the form changes. This approach is essentially a two-way data binding approach. The model and the UI control are always synchronized. You can use this method to choose whether to send changes to the server in real time (implicit save) or wait until the user clicks the Save button (show save). * options are informal and not feasible when there are cross-field validation rules. The second option may require you to undo the model changes if the user navigates to another project without clicking Save.

(2) the "delay" method: wait until the user clicks Save to update the model based on the new value of the UI control, and then send these changes to the server.

The topic of this discussion is not specific to Backbone.js, so it is not discussed in this article. For simplicity, I use the delay method here. However, I still import change events and use them to record console changes. I find this method very effective when debugging an application (in particular, to make sure I have cleared the binding, see the Close function). If you find that the change event is triggered multiple times, the binding may not be cleared accordingly.

HeaderView (lines 125 to 148)

Backbone.js views are typically used to render domain models (such as WineListView, WineListItemView, and Wine View). But they can also be used to create composite UI components. For example, in this application, the header view (a toolbar) that we define can be made up of several different components and can encapsulate its own logic.

After reading this article, I believe you have some understanding of "sample Analysis of CRUD in Backbone.js Wine Cellar". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.