Backbone. js Wine Cellar tutorial-Part 1: getting started

Adobe Creative Cloud

You can register the Adobe Creative cloud service for free. The Creative Cloud also provides many HTML5 development tools, including Edge animation, Edge Code, and Edge Inspect, which can be downloaded for free.
Creative Cloud login address here: http://t.cn/zTbTLKT

One of the challenges facing building important Web applications is that the untargeted nature of JavaScript may first lead to a lack of code structure, or in other words, a lack ...... Trunk. JavaScript is usually written as a series of free-hanging irrelevant code blocks. It will not take long for people to understand the logic and structure of their own code.

Backbone. js is a lightweight framework that effectively solves this problem by adding a framework to a Web application with a large number of JavaScript.

Build a base block independently

Backbone. js provides several class models, sets, views, and routers. You can use this to expand and define your own applications to build a base block. To use Backbone. js to build an application, first create the model, set, and view of the application. Then define a set of deep links) URL to provide the application entry point "Router" to activate these components.

You can use Backbone. js to organize independent entity models, sets, and views.

Data Binding

You can use Backbone. js to bind a view to a model. When the data of a model changes, all views bound to the model are automatically re-displayed. Complex UI synchronization code is no longer required.

Clever REST Integration

Backbone. js can also be integrated with RESTful services naturally, magically and skillfully. If you expose backend data purely through RESTful APIs, use Backbone. the simple model API of js performs GET, POST, PUT, and DELETE operations on the model.

About the Wine Cellar Sample Application

This tutorial is divided into three parts. We will create the Wine Cellar application in this tutorial to allow users to browse the Wine list and add, update, and delete wines.

1) in this article "Backbone. js Wine Cellar tutorial-Part 1: Getting started", you will define the basic structure. You will create a read-only version for the application. In this way, you can retrieve the wine list and obtain detailed information about each type of wine.

2) In the Backbone. js Wine Cellar tutorial-Part 2: CRUD tutorial-Part 2: CRUD, you will add the code function to add, update, and delete wines. You can use the powerful REST integration function of Backbone.

3) in the Backbone. js Wine Cellar tutorial-Part 3: deep link and application status, you will be added with comprehensive history management and deep link support.

Figure 1. Wine Cellar Application

Read-only Wine Cellar application code Walkthrough

To view the read-only version of the first part of the work version application, click here.

The backbone. js code is as follows. I suggest you download the code from my source code management website for further understanding. The link to this application is located in the required section of this tutorial.

Figure 2. backbone. js code.

Code focus:

1. WineModelLine 1): Note that this code does not clearly define the property name, country/region, and year ). You can add verification, default value, and so on. For more information, see section 2: CRUD.

2. WineCollection4th rows to 7th rows): "model" indicates the nature of the set. "Url" provides a RESTFul API terminal. This is all the components required to search, create, update, and delete wine using the simple model API of Backbone.

3. WineListViewRows 10th to 25th): The render () function cyclically accesses the set, instantiates the WineListItemView of each wine in the Set, and adds it to wineList.

4. WineListItemViewRows 27th to 38th): The render () function combines model data to the wine-list-item template and defines it in index.html ). By defining a separate list item view, you can easily update a specific list item when the model is changed without re-presenting the entire list. In part 2: CRUD, view more information about the content.

5. WineViewRows 40th to 49th): this view is used to display the wine details in the wine form. The render () function combines a specific wine of model data to the wine-details template retrieved from index.html.

6. AppRouterLines 52nd to 71st): This Code uses a deep link) URL provides an entry point for the application. The following two routes are defined: the default route ("") displays the wine list. The "wines/: id" route displays the details of a specific wine in the wine form. Note that in the first part, this route cannot be deeply linked. You must use the default route to start the application and then select a specific wine. In Part 3: deep links and application statuses, make sure that you are deeply connected to specific wines.

Further study

Next, read Section 2: CRUD To learn how to add more features to this application.