標籤：des style http io os 使用 ar java strong
稍為複雜一點的網站都是多個前端工程師合作而成，因此分工是必需的。簡單一點的分工就是一個人負責一個頻道，某個頁面是由一個人全部做的；但如果涉及到一個頁面非常複雜，需要多個人同時動工呢？於是到模板的出場時間了。
模板有兩種，一種是嵌入到頁面內的模板，一種是獨立成子頁面的模板。這兩種avalon都支援。前者通常是使用type為瀏覽器無法識別的MIME類型的script標籤，display:none的textarea標籤或noscript標籤（0.94後支援，建議使用它）作為模板容器，最近HTML5出了一個新的template標籤，大家也不妨用一用。一般情況下，它是用於放置彈出層的內容。另一個模板，則需要通過AJAX請求來載入它們，它們適用範圍更廣，並且重用性更好。
對於頁面內的模板，我們可以使用ms-include=”expr”綁定，對於獨立於頁面的模板，我們可以使用ms-include-src=”expr”綁定。ms-include要求對應一個ID（換言之，作為模板容器的script等標籤必須指定ID），ms-include-src要求對應一個路徑。需要注意的是ms-include或ms-include-src的屬性值預設都是對應VM的一個屬性，當作是一個變數，如果想直接使用字串，那麼需要使用雙重引號。
<!DOCTYPE html><html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script src="avalon.js"></script> <script> var model = avalon.define({ $id: "test", content: "引入內部模板", name: "司徒正美", eee: "lala", change: function() { model.eee = model.eee === "lala" ? "hehe" : "lala" } }) </script> </head> <body ms-controller="test"> <script type="avalon" id="tpl"> here, {{ 3 + 6 * 5 }} </script> <script type="avalon" id="lala"> <strong>{{name}}</strong>!!! </script> <script type="avalon" id="hehe"> <em>{{content}}</em>!!! </script> <p>{{content}}<button ms-click="change" type="button">切換子模板</button></p> <div ms-include="‘tpl‘"></div><!--注意這裡--> <div ms-include="eee"></div> </body></html>
ms-include與ms-include-src的屬性值可以添加插值運算式，見下面例子，不過注意需要開啟伺服器，因為用到AJAX請求。
有四個頁面，一個首頁面與三個獨立的子模板，它們都放在一起，內容分別如下。
include.html
<!DOCTYPE html><html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ms-include</title> <script src="../avalon.js"></script> <script> var model = avalon.define({ $id: "test", url: "Template1", name: "司徒正美", password: ‘12345678‘, array: [1, 2, 3, 4, 5, 6, 7], add: function(e) { if (this.value && e.which == 13) {//this為input元素 var a = this.value model.array.push(a) this.value = ""; } } }) </script> </head> <body> <h3 style=‘text-align: center‘>ms-include</h3> <div ms-controller="test"> <select ms-duplex="url"> <option>Template1</option> <option>Template2</option> <option>Template3</option> </select> <div ms-include-src="include{{url}}.html"></div> </div> </body></html>
includeTemplate1.html
<h1>這是模板1</h1><p>產生於{{ new Date | date("yyyy MM dd:HH:mm:ss")}}</p><p>產生於{{ "2011/07/08" | date("yyyy MM dd:HH:mm:ss")}}</p><p>產生於{{ "2011-07-08" | date("yyyy MM dd:HH:mm:ss")}}</p><p>產生於{{ "01-10-2000" | date("yyyy MM dd:HH:mm:ss")}}</p><p>產生於{{ "07 04,2000" | date("yyyy MM dd:HH:mm:ss")}}</p><p>產生於{{ "3 14,2000" | date("yyyy MM dd:HH:mm:ss")}}</p><p>產生於{{ 1373021259229 | date("yyyy MM dd:HH:mm:ss")}}</p><p>產生於{{ "1373021259229" | date("yyyy MM dd:HH:mm:ss")}}</p><p>值得注意的是，new Date可傳的格式類型非常多，但不是所有瀏覽器都支援這麼多，詳看<a href="http://dygraphs.com/date-formats.html">這裡</a>。</p>
includeTemplate2.html
<script type="avalon" id=‘form‘> <p>姓名：<input ms-duplex="name">{{name}}</p> <p>密碼：<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}} 個元素: {{el}} <span ms-click="$remove">點我刪除</span></li></ul><p>添加新元素 ，然後斷行符號<input ms-keypress="add"></p>
如果大家想在模板載入後，加工一下模板，可以使用data-include-loaded來指定回調的名字。
如果大家想在模板掃描後，隱藏loading什麼的，可以使用data-include-rendered來指定回調的名字。
<!DOCTYPE html><html> <head> <title>ms-include相關實驗</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="avalon.js"> </script> <script> avalon.define("test", function(vm) { vm.render = function(){ console.log("render") } }) </script> </head> <body ms-controller="test" > <div ms-include-src="‘temp.html‘" data-include-rendered=‘render‘></div> </body></html>
temp.html
<!DOCTYPE html><html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script> console.log("----------") </script> </head> <body> <div>include content</div> </body></html>
最後我們看avalon.templateCache，所有ms-include-src載入的模板都會緩衝在這裡，從而有效地減少請求數。並且這個東西還有一個額外的好處，我們的JS與CSS最終會壓縮合并，對於這些模板我們也想把它們合并到JS檔案裡面，它就有用武之地了。這也是我們在第一節看到的那樣，把requirejs載入回來的模板都放在avalon.templateCache裡，與ms-include-src一起使用了。
<!DOCTYPE html><html> <head> <title>avalon.templateCache的應用</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="avalon.js"></script> <script> avalon.templateCache["aaa.html"] = "<strong>dddddddddddd</strong>" avalon.templateCache["bbb.html"] = "<em>555555555555</em>" var model = avalon.define({ $id: "test", adjust: function(tmpl) { return tmpl +" "+ (new Date - 0) }, aaa: "aaa.html", change: function() { model.aaa = model.aaa === "aaa.html" ? "bbb.html" : "aaa.html" } }) </script> </head> <body ms-controller="test"> <div ms-include-src="aaa" data-include-loaded="adjust"></div> <button type="button" ms-click="change">點我切換模板</button> </body></html>
迷你MVVM架構 avalonjs 學習教程13、模板引用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
