WIN10 Series: JavaScript Integrated Example 1

The above sections explain some of the techniques used to develop Windows store apps using the HTML5 and JavaScript languages, and this section combines the knowledge described earlier to create a recipe application that will help readers understand and understand this knowledge further.

The main function of this recipe application is to introduce some dishes and staple food practices, which contain three pages: the first page is the main page, used to display some dishes and staple food by category; The second page is a category page that displays information about a category and the dishes or staple foods that belong to that category; The third page is the menu page, Displays detailed information about a dish or staple, such as its name, picture, and specific practices. These three pages can jump to each other, for example, when you click the name of a category in the main page, you jump to the category page, and when you click a dish in the main page or on the category page, you jump to the menu's detail page.

Depending on the page, the application is divided into three sections, first the main page is created, then the category page is created, and finally the dishes page.

Start by creating a blank application project for the JavaScript Windows store in Visual Studio 2012, and name it menuapplication. Then add three new folders in the Images folder and name them "Fenlei",

"Shucai", "Roulei", and then add the required images to the three folders. Next, create a new JavaScript file in the JS folder and name it menudata. Open the Menudata.js file, define the data source and some functions related to manipulating the data source , as shown in the following code:

(function () {

"Use strict";

// define the category of dishes

var samplegroups = [

{key: "Shucai", Title: " Vegetable class:", backgroundimage: "Images/fenlei/shucai.jpg", Description: " There are many vitamins in vegetables ..." },

{key: "Roulei", Title: " meat:", backgroundimage: "Images/fenlei/roulei.jpg", Description: " c10> meat contains many essential amino acids, meat protein is very rich, in addition to eat meat can prolong people's Hunger "},

];

// define a variety of dishes while setting the category you belong to

var sampleitems = [

{group:samplegroups[0], title: " mixed cucumber ", Description: " bi-green, crisp , fragrance, Fresh salty ", Content:" 1. Mushroom cut to the head .... ", backgroundimage:" Images/shucai/banhuanggua.jpg "},

{Group : Samplegroups[0], title: " braised winter melon " , Description: " taste fresh salty, color red bright, wax gourd soft rotten, fragrant umami beauty wax gourd peeled to flesh ....

{Group : Samplegroups[0], title: " garlic eggplant " , Description: " strong garlic, salty and tasty high blood pressure diet jiapin "content:" 1. Span style= "font-family: Italic" > Prepare the ingredients, long eggplant two ....

{Group : Samplegroups[1], title: " braised pork ", Description: " braised pork is a hot dish, to pork for the production of ingredients, braised pork with cooking techniques mainly in casserole, taste is sweet. pork cut into Span style= "Font-family:courier New" >2 cm size block ....

{Group : Samplegroups[1], title: " braised ribs " , Description: " braised pork ribs traditional Sichuan cuisine. This dish tastes salty, ribs crisp rotten, color golden red. boil boiling water in the pot, put the chop pieces of ribs ....

{group:samplegroups[1], title: " twice- cooked meat ", Description: "The cooked pork is a traditional Chinese cuisine, West Sichuan also called boiling pot meat. ", Content:" 1. even skin pork .... ", backgroundimage:" Images/roulei/huiguorou.jpg "},

];

// Create a List Object

var list = new WinJS.Binding.List ();

// traverse the data source and add dishes to the appropriate grouping

Sampleitems.foreach (function (item) {

List.push (item);

});

// Use Key and the Group attribute values to group

var groupeditems = list.creategrouped (

function Groupkeyselector (item) {return item.group.key;},

function Groupdataselector (item) {return item.group;}

);

// returns the menu item that contains the specified category . List

function Getitemsfromgroup (group) {

Return list.createfiltered (function (item) {return Item.group.key = = = Group.key;});

}

// by the Food category Key A value gets a category

function Resolvegroupreference (key) {

for (var i = 0; i < groupedItems.groups.length; i++) {

if (GroupedItems.groups.getAt (i). Key = = = key) {

return groupedItems.groups.getAt (i);

}

}

}

// get the label of the dish

function Getitemreference (item) {

return [Item.group.key, Item.title];

}

// To get a corresponding dish by the label of the dish

function Resolveitemreference (Reference) {

for (var i = 0; i < groupeditems.length; i++) {

var item = Groupeditems.getat (i);

if (Item.group.key = = = Reference[0] && Item.title = = = Reference[1]) {

return item;

}

}

}

WinJS.Namespace.define ("Menudata", {

Items:groupeditems,

Groups:groupedItems.groups,

Getitemsfromgroup:getitemsfromgroup,

Getitemreference:getitemreference,

Resolvegroupreference:resolvegroupreference,

Resolveitemreference:resolveitemreference

});

})();

In the above code, we first define an anonymous function, in which an anonymous function initializes a data set of two array types Samplegroups and Sampleitems, where the Samplegroups data collection contains the class information of the dish, The Sampleitems data collection contains information on a variety of dishes, which are listed only in some categories and dishes. Then call the WinJS.Binding.List constructor to define an object named list and use the Foreach function to specify that each data object in the Sampleitems data collection calls an anonymous function that calls the push function in this anonymous function to sampleitems the data in the collection. Each dish information is added to the list object . Next, use the creategrouped function of the list object to classify each dish in the list object and save the sorted dish information to the Groupeditems object. The creategrouped function has two parameters of the function type Groupkeyselector and Groupdataselector, where the Groupkeyselector function returns the dish category identification key, The Groupdataselector function returns the Group property value of the dish.

the Getitemsfromgroup function is then defined, which invokes the createfiltered function of the list object according to the parameter group to obtain all the dishes in a category. Then define the Resolvegroupreference function, traversing all the dishes in the Groups list in the function, and return to the dish category if the label key of the dish category is the same as the parameter key. Next define the Getitemreference function, which, based on the parameter item, returns the Item.group.key and Item.title two properties as the label of the dish. Continue to define the Resolveitemreference function, which first iterates through all the dishes in the function, if the identity of the category of a dish is the same as the first element of the parameter reference array, and the name of the dish is the same as the second element of the reference array, Return to this dish. Finally, define a namespace named "Menudata", add the data that the program uses and the functions defined above to that namespace so that it can be referenced in other files through the namespace.

It is important to note that the key attribute in this example identifies a dish category, which identifies a dish by its key property and the title attribute of the dish . After you have finished defining the data source and some functions related to the data source operation, the next step is to implement the three pages mentioned above, and first look at the main page.

WIN10 Series: JavaScript Integrated Example 1