handlebars.min.js的使用

時間 2019-11-21

標籤 handlebars.min.js handlebars min 使用欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>handlebars.min.js的使用</title>
</head>
<body>
    <ul id="append_ul">
    </ul>
</body>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/handlebars.min.js" type="text/javascript"></script>
<!-- 預編譯模板 -->
<script id="appendTemplate" type="text/x-handlebars-template">
        {{description.escaped}}  
        {{example}}  
        <br><br>  
        {{description.unescaped}}  
        {{{example}}}  
</script>
<script type="text/javascript">
    $(function(){
        // 1.獲取模板
        var html = $("#appendTemplate").html();
        // 2.編譯模板
        var compile_html = Handlebars.compile(html);
        // 3.定義數據
        var context = {
            "description": {  
                "escaped": "Using {{}} brackets will result in escaped HTML:",  
                "unescaped": "Using {{{}}} will leave the context as it is:"  
            },  
            "example": "<button> Hello </button>"  
        };
        // 4.傳送數據
        var append_html = compile_html(context);
        // 5.追加html
        $("#append_ul").append(append_html);
    });
</script>
</html>

相關標籤/搜索

每日一句

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