テンプレートエンジン

バックグラウンドで返されるJOSNデータは、JOSNデータを介してページをレンダリングするときに問題が発生します。つまり、JSONデータがページをレンダリングするときに、同じ形式のデータの問題（フォーム、リストなど）が発生します。

同様のデータ型のコンテンツに遭遇した場合は、ページのバッチ解析にテンプレートを使用できます。現時点ではテンプレートエンジンを使用しています

テンプレートエンジン：表示用の同様の構造があり、データがすでに存在する場合、次のステップは「モデル」が必要になることです。したがって、モデルは専門用語ではテンプレートエンジンです。

ここで使用したテンプレートエンジンは、サードパーティのプラグインunderscore.jsです。

これが簡単な例です

<script src="js/underscore.js"></script>
<body>
    <script>
        // 模板字符串
        var templateStr = "大家好，我是<%=name%>,今年<%=age%>岁了，我来自美丽的<%=adress%>,我很喜欢<%=hobby%>";
        // 模板编译函数
        var compiled = _.template(templateStr);
        //console.log(compiled)
        // JOSN数据
        var jsonObj1 = {
            "name": "小黑",
            "age": "25",
            "adress": "三亚",
            "hobby": "冲浪"
        }
        var jsonObj2 = {
            "name": "小白",
            "age": "22",
            "adress": "冰城哈尔滨",
            "hobby": "冰雪运动"
        }
        // 编译后的结果
        var result1 = compiled(jsonObj1);
        var result2 = compiled(jsonObj2);
        console.log(result1);
        console.log(result2);
    </script>
</body>

underscore.jsテーブルのレンダリング

テンプレートを作成する方法は2つあります

1つ目は、テンプレートのHTMLコードを直接文字列にしてから、テンプレート関数を作成することです。

var template = "<tr><td><%=id%></td><td><%=name%></td><td><%=age%></td><td><%=sex%></td></tr>"

2つ目は、スクリプトタグを使用して実現することです。

スクリプトのタイプ値が「text / javascript;」の場合、内部コードが認識されて実行されますが、そうでない場合は、サイレントでエラーなしで実行されないため、コンテンツの保存に使用できます。

たとえば、次のテンプレートの型の値を「text / template」に設定して、テンプレート文字列が内部に格納されていることを示すことができます。または、他のテンプレートを設定して、意味のある名前を設定してみてください。

<body>
    <table>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </table>
    <script type="text/template" id="templateText">
        <tr>
      <td><%=id%></td>
      <td><%=name%></td>
      <td><%=age%></td>
      <td><%=sex%></td>
    </tr>
  </script>
    <script src="js/underscore.js"></script>
    <script>
        var table = document.getElementsByTagName("table")[0];
        // 获取模板结构
        var templateText = document.getElementById("templateText");
        // 获取template内部的数据
        var templateData = templateText.innerHTML;
        // 发送请求
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    var data = xhr.responseText;
                    var obj = JSON.parse(data)
                    renderDom(obj)
                }
            }
        }
        xhr.open("get", "test.json", true);
        xhr.send(null);
        // 渲染模板
        function renderDom(obj) {
            // 编译模板函数
            var compiled = _.template(templateData);
            // 遍历返回的数据内容
            _.each(obj.info, function (item) {
                var dom = compiled(item);
                // 追加节点上树
                table.innerHTML += dom;
            })
        }
    </script>
</body>

.json

{
  "info": [
    {
      "id":10001,
      "name": "小明",
      "age": 18,
      "sex": "男"
    },
    {
      "id":10002,
      "name": "小兰",
      "age": 15,
      "sex": "男"
    },
    {
      "id":10003,
      "name": "小红",
      "age": 14,
      "sex": "男"
    }
  ]
}

Ajaxテンプレートエンジンunderscore.js

テンプレートエンジン

underscore.jsテーブルのレンダリング

おすすめ