Translation-"Dojo Tutorials" Dojo Object Store

Separation of concerns is the basis for good programming. Keeping the presentation separate from the data is key. Inspired by the HTML5 storage API, the Dojo Object storage architecture establishes a unified interface for data interaction.

Why use Dojo Object storage?

Separation of concerns is the basis of an organized, manageable program, where the point of separation in a Web application is primarily the data and user interface (in the MVC architecture, the user interface is usually the attempt and the controller). Inspired by the HTML5 storage API, the Dojo Object storage architecture establishes a unified interface for data interaction. These APIs are used to facilitate the development of loosely coupled, allowing the pendant and user interface to interact with the data in a consistent way from multiple sources.

Dojo Object storage allows you to develop and use well-encapsulated components to easily connect multiple data sources. Dojo Object storage is an API, and there are many implementations called store. Storage contains a simple memory storage, json/rest storage, and dojo.data storage and storage wrapper, which provide some additional functionality.

Begin

The simplest storage is dojo/store/memory. We can provide an array of objects to the constructor, and then we can interact with it. Once the store is created, we can query it using the Query method. A simple way is to provide an object's key-value pair to identify the required value for the matching object. The Query method always returns an object or an array with a foreach method (like map and filter):

1Require (["Dojo/store/memory"],function(Memory) {2     varEmployees = [3{Name: "Jim", Department: "Accouting"},4{Name: "Bill", Department: "Engineering"},5{Name: "Mike", Department: "Sales"},6{Name: "John", Department: "Sales"}7     ];8 9     varEmployeestore =NewMemory ({data:employees, Idproperty: "Name"});TenEmployeestore.query ({department: "Sales"}). ForEach (function(employee) { One         //This is called for each employee in the sales department A alert (employee.name); -     }); -}

This will bring up the name of each employee in the sales department.

We can continue to create new objects in this store and delete objects:

1 // Add a new employee 2 employeestore.add ({name: "George", Department: "Accounting"}); 3 4 // Remove Bill 5 employeestore.remove ("Bill");

We can retrieve and update the data. The objects in the store exist as native JavaScript objects, so we can directly access and modify the properties of the objects (when you change the properties, make sure you call put to save the changes):

1 //Retrieve object with the name "Jim"2 varJim = Employeestore.get ("Jim");3 //Show the Department Property4Console.log ("Jim's department is"jim.department);5 //interate through all the properties of Jim:6  for(varIinchJim) {7Console.log (i, "=", Jim[i]);8 }9 //Update this DepartmentTenjim.department = "Engineering"; One //and store the change AEmployeestore.put (Jim);

Back to the query, we can add additional parameters to the query. These additional parameters can be used to limit the number of queries returned, sort objects, as the second parameter of the Query method. The second parameter can be an object with the start and Count properties to limit the number of queries returned. Using a restricted data collection is dangerous for large amounts of data, and you should use a component with paging functionality, such as a grid, to request data as needed. The second parameter can also have a sort parameter that specifies the sort field and sort direction in the query:

1Employeestore.query ({department: "Sales"}, {2     //The results should the sorted by department3Sort: [{attribute: "Deparment", Descending:false}],4     //starting at offset of 05start:0,6     //With a limit of ten objects7Count:108}). Map (function(employee) {9     //return just the name, mapping to an array of namesTen     returnEmployee.Name; One}). ForEach (function(employeename) { A Console.log (employeename); -});

The memory store is a synchronized store, which means that the results are returned directly after each action (Get return object).

Dojo/store/jsonrest

Another highly available store is jsonrest storage, with multiple interactions with the server, using the JSON-based Http/rest standard. The store method directly corresponds to the Get,put,post and delete methods of the HTTP protocol. For more information about the server side, see the jsonrest documentation.

Here is an example of an asynchronous store. An asynchronous store return method returns a commit (promises). We can promise back the callback to use promise.

1 function (jsonrest) {2     New Jsonrest ({target: "/employee/"}); 3     Employeestore.get ("Bill"). Then (function(Bill) {4         //  called Once Bill was retrieved5    }); 6 });

We can also use Deferred.when () to deal with these methods, which may be synchronous or asynchronous, and do not go into concrete implementations for uniform behavior.

These examples show how to interact with the store. We limit the ability to start building widgets and components that interact with the store, depending on the implementation details. We can also associate our store with existing components.

For example, the Storeseries adapter can allow us to use a store as the data source for the icon. Many components can use the store, as long as you provide the query you should have in the store:

1 //Note that while the Default PLOT2D module was not used explicity, it needs to2 //Being loaded to being able to create a Chart when no other plot is specified.3 require ([4"Dojox/charting/chart", 5"Dojox/charting/storeseries", 6     /*, other deps,*/7"Dojox/charting/plot2d/default"8],function(Chart, Storeseries/*, other Deps*/) {9     /*Create Stockstore here ...*/Ten     NewChart ("Lines"). One         /*Any other config of chart*/ A         //Now use a data series from my store -Addseries ("Price",NewStoreseries (Stockstore, {query: {sector: "Technology"}}, "Price") . render (); -});

Another important concept of dojo storage is to add functionality through the store's wrapper. Dojo has some add-on store wrapper, including a cache wrapper, which triggers an event when the data changes to the watch wrapper.

Local storage

Dojo1.10 added local storage dojo/store in Dojox to support INDEXEDDB and Websql.

The future of Dstore:dojo/store

The new Dstore is the successor to Dojo/store, available after Dojo1.8, or Dojo2 's plan API. If you have just contacted dojo, we suggest you look at Dstore.

Summarize

Dojo's Object store is a feature added in version 1.6, a useful toolset that helps us decouple data from user interface concerns. It provides a simple API to help with the convenience of custom storage. For more information, see the Reference guide with the following article.

Additional Resources

• Jsonrest Reference Guide
• SitePen Blog about the Dojo Object store article

Translation-"Dojo Tutorials" Dojo Object Store