Avalon Study Notes (Fri)

Five, build an engineering environment

In this case, the basic theory is almost there, it's time to do a practical example

In a different tutorial, create a new project based on theAvalon Learning Tutorial Series ,"1, introducing Avalon."

I'm using the vs2013community version .

First open->web site, point to an empty directory

New two folder, one modules, one reference.

Modules A module of the site,reference inside the third-party libraries we need to use, such as Avalon, and the usual Requirejs,jquery , etc.

According to the example, Avalonwas used(I intend to use the modern version),Requirejs(and its plugin Domready,css,text),jquery

Because of the use of require and domready,Avalon can be deleted from the band.

Because the use of the modern version, you need to copy the shim version to change

Start with the AMD Loader, and then copy the code from the end of the shim .

And then you get rid of the modern in the file name , Avalon .

Then there are two files as the entrance

Index.html

<! DOCTYPE html>
There's a couple of things worth noticing.
The first is to lead to the Requirejs,data-main is  the attribute of Requirejs, indicating the outermost JS 
Then, the body is divided into three parts, each bound to the header and footer,Header  It is also  parsed in HTML format. 
A template called page is used in the middle.
Style should be used to ensure that the screen does not flash out of the pre-binding content, this introductory tutorial is mentioned. 
And then the main.js.
Require.config ({///first block, config    baseUrl: ',    paths: {        jquery: ' reference/jquery/jquery-2.1.3 ',        Avalon: " Reference/avalon/avalon ",//must modify the source code, disable the self-loaded loader, or directly delete the AMD Loader module        text: ' Reference/require/text ',        domready: ' Reference/require/domready ',        css: ' reference/require/css '    }, Priority    : [' Text ', ' CSS '],    shim: {        jquery: {            exports: "jquery"        },        Avalon: {            exports: "Avalon"}}}    ); require ([' Avalon ', " domready! "], function () {///second block, add root VM (process common part)    avalon.log (" Load Avalon Complete, start building root VM and load other modules ")    Avalon.templateCache.empty = ""    avalon.define ("root", function (VM) {        vm.header= "This is the root module for placing things that other modules share, such as <b> username </b> Whatever ",        vm.footer=" footer message ",        vm.page=" Empty ",        vm.page2=" Empty "    })    Avalon.scan (document.body)    require (['./modules/testmodule/test '], function () {///third block, load other modules        Avalon.log ( "Load Other complete")    });

Mainly is the requirejs format, this need to see requirejs documents, presumably is to each JS set a name, and then directly in JS You can quote a name.
The first block is  the configuration of the Requirejs.
The second block is  the viewmodel definition of root.
The third block is loaded with other modules, and I'm named testmodule here.
Each module should include at least one HTML and one js, so create a new two file, a test.html, a test.js  , put it under the testmodule folder
Test.html
<div ms-controller= "TestVM" >    <input ms-duplex= "value"/>{{value}}</div>

Test.js
Define (["Avalon", "text!. /test.html "], function (Avalon, test) {    avalon.templateCache.test = Test    avalon.define (" TestVM ", function ( VM) {        vm.value= "Test text"    })    avalon.vmodels.root.page = "Test"})
Avalon.templateCache.test = Test and avalon.vmodels.root.page = "Test" are the two words that are critical. 
Avalon.templateCache.test = Test means to add test.html to the templatecache and define a name called  Test
Avalon.vmodels.root.page = "Test" is a page that says root that was defined in the beginning of the main.js   property to the test you just defined . 
In this way, the contents of thetest.html can be displayed in the second div of index . 
Ok, so far, with Avalon combined with Requirejs to create a simple Web site development Engineering Environment
Gratifying to celebrate, gratifying to celebrate



Avalon Study Notes (Fri)