Mustache簡明使用教程

wsy92 8年前發布 | 85K 次閱讀 模板引擎 Mustache.js

來自： http://lolicookie.herokuapp.com/mustachejian-ming-shi-yong-jiao-cheng/

Mustache 是一款簡單的由js編寫的模板框架，如果你以前用過smarty或者簡單知道它的使用方法就會很好理解它的使用方式。理論上可以將它使用在前端中或者node中，是一款很易于理解和使用的前端框架

下載源碼

Mustache 的代碼可以在github中找到并下載（ 在這里 ），，，好吧我并沒有研究明白怎么用npm自己compose，我選擇了直接下載目錄下的 mustache.min.js ，或者你也可以使用由 bootcdn提供的CDN鏡像 來引用這個庫，這里選了一個2.21的 

<script src="http://cdn.bootcss.com/mustache.js/2.2.1/mustache.min.js"></script>

其實大家也注意到一些諸如jquery之類的庫，都會有兩個文件給出來，一個是 jquery.js ，另一個是 jquery.min.js ，我看了一下這兩個文件的區別，其實帶 .min.js 的是經過壓縮混淆的版本，體積也會比不帶 min 的小一些，但是代碼由于經過壓縮混淆完全沒有可讀性，所以大家可以自己舍取

使用方法

下面這個例子演示了如何通過Mustache和jquery向頁面中輸出數據

<html>  
    <head>
        <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="mustache.min.js"></script>
    </head>
    <body>
        <div id="main">
            <script>
                //頁面加載完執行 這部分詳見jq手冊
                $(function(){
                    //待填充的數據
                    var data = {
                        'user_name' : 'techmoe'
                    };

                    //使用Mustache.render方法填充模板并追加進div#main
                    $('#main').append(Mustache.render('<div style="font-size:20px">Hello, {{user_name}}</div>', data));
                });
            </script>
        </div>
    </body>
</html>

輸出 但是這么寫有時看起來似乎不太規整，因為我們并不能把大量的html代碼塞進js文件，所以我們可以用一種流行的方法把模板數據放到html中 

<html>  
    <head>
        <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="mustache.min.js"></script>
    </head>
    <body>
        <div id="main">

            <!-- 在html內創建模板 -->
            <script type="text/x-mustance" id="template-1">
                <div style="font-size:20px">
                    Hello, {{user_name}}
                </div>
            </script>


            <script>
                //頁面加載完執行 這部分詳見jq手冊
                $(function(){
                    //待填充的數據
                    var data = {
                        'user_name' : 'techmoe'
                    };

                    //使用Mustache.render方法填充模板并追加進div#main
                    //這里通過jquery的html方法取得了模板的數據
                    $('#main').append(Mustache.render($('#template-1').html(), data));
                });
            </script>

        </div>
    </body>
</html>
 本文由用戶 wsy92 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！