迷你MVVM框架 avalonjs 學習教程1三、模板引用

時間 2019-11-08

標籤迷你 mvvm 框架 avalonjs 學習教程模板引用简体版

原文原文鏈接

稍爲複雜一點的網站都是多個前端工程師合做而成，所以分工是必需的。簡單一點的分工就是一我的負責一個頻道，某個頁面是由一我的所有作的；但若是涉及到一個頁面很是複雜，須要多我的同時動工呢？因而到模板的出場時間了。javascript

模板有兩種，一種是嵌入到頁面內的模板，一種是獨立成子頁面的模板。這兩種avalon都支持。前者一般是使用type爲瀏覽器沒法識別的MIME類型的script標籤，display:none的textarea標籤或noscript標籤（0.94後支持，建議使用它）做爲模板容器，最近HTML5出了一個新的template標籤，你們也不妨用一用。通常狀況下，它是用於放置彈出層的內容。另外一個模板，則須要經過AJAX請求來加載它們，它們適用範圍更廣，而且重用性更好。html

對於頁面內的模板，咱們可使用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請求。java

有四個頁面，一個主頁面與三個獨立的子模板，它們都放在一塊兒，內容分別以下。瀏覽器

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.htmlrequirejs

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。