Mini MVVM Framework Avalonjs Learning Tutorial 13, template Reference

A slightly more complex site is the work of multiple front-end engineers, so the division of labor is required. A simple division of labor is a person responsible for a channel, a page is done by a person, but if it involves a page is very complex, need more people to work at the same time? So it's time to go to the template.

There are two kinds of templates, one is embedded in the page template, and the other is a separate sub-page template. Both of these Avalon support. The former is usually a script tag using type MIME type that is not recognized by the browser, display: None of the textarea tags or noscript tags (after 0.94 support, it is recommended to use it) as a template container, recently HTML5 out a new template tag, you might as well use. In general, it is the content that is used to place the popup layer. Another template, you need to load them with an AJAX request, which is more versatile and more reusable.

For templates within the page, we can use the ms-include= "expr" binding, and for page-independent templates, we can use the ms-include-src= "expr" binding. Ms-include requires an ID(in other words, a script such as a template container must specify an ID), MS-INCLUDE-SRC requires a path . It is important to note that the property value of Ms-include or MS-INCLUDE-SRC is a property of the corresponding VM and is considered a variable, and double quotation marks are required if you want to use the string directly.

<! DOCTYPE html>
Ms-include and MS-INCLUDE-SRC attribute values can add interpolation expressions, see the following example, but note the need to open the server, because the AJAX request.
There are four pages, a master page and three separate sub-templates, all together, with the contents as follows.
Include.html
<! DOCTYPE html>
Includetemplate1.html
Includetemplate2.html
<script type= "Avalon" id= ' form ' >    <p> Name: <input ms-duplex= "name" >{{name}}</p>    <p > Password: <input type= "password" ms-duplex= "password"/>{{password}}</p></script><form Ms-include= "' Form '" style= ' border:1px solid #666; background:sandybrown;padding:20px ' ></form>
Includetemplate3.html
<ul ms-each-el= "Array" >    <li > {{$index +1}} elements: {{el}} <span ms-click= "$remove" > Point I delete </span ></li></ul><p> Add new element, then enter <input ms-keypress= "Add" ></p>
If you want to process the template after the template is loaded, you can use data-include-loaded to specify the name of the callback.
If you want to hide loading after the template has been scanned, you can use data-include-rendered to specify the name of the callback.
<! DOCTYPE html>
Temp.html
<! DOCTYPE html>
Finally we look at Avalon.templatecache, where all ms-include-src loaded templates are cached here, effectively reducing the number of requests. And this thing has an additional benefit, our JS and CSS will eventually compress the merge, for these templates we also want to merge them into the JS file, it is useful. That's what we saw in the first section, where the templates loaded with Requirejs are placed in Avalon.templatecache and used with MS-INCLUDE-SRC.
<! Applications of DOCTYPE html>
Mini MVVM Framework Avalonjs Learning Tutorial 13, template Reference