在jQuery / Javascript

Question

我有一个场景，我从JSON接收数据，并且应该在网页上，复杂的HTML结构（即包含列表的表等）中动态显示数据。

每次收到JSON数据时，我都希望动态重新生成HTML元素。例如，HTML表行数将取决于来自JSON的数据。

鉴于HTML结构很复杂，并且它们也应该有一些与之关联的CSS - 最好的方法是什么？

我的想法是＆＃34;宣布＆＃34; HTML文件中的单个元素，然后将它们全部放在Javascript（jQuery）中的复杂结构中。

例如，如果我需要生成一个表，每个单元格中都有一个列表，并且每个列表都是动态创建的并且用javascript中的元素填充，那么我会声明以下内容：

带声明的HTML文件摘要

    <!-- Define table -->
    <script type="text" id="my_table">            
        <table class="a-bordered a-align-center a-spacing-base a-size-base"></table>
    </script>

    <!-- Define table heading element: each column has it's own heading -->
    <script type="text" id="my_table_heading">
        <th class="a-color-base a-size-base a-text-center"></th>
    </script>

    <!-- Define table row -->
    <script type="text" id="my_table_row">
        <tr class="a-spacing-base a-spacing-top-base a-text-center"></tr>
    </script>

    <!-- Define list -->
    <script type="text" id="my_list">
        <ol class="a-ordered-list a-vertical a-spacing-base"></ol>
    </script>

    <!-- Define list item -->
    <script type="text" id="my_list_item">            
        <li class="a-list-normal a-spacing-none a-spacing-top-mini"><span class="a-list-item a-color-link"></li>
    </script>

当我声明了所有内容后，我会在 jQuery 中使用它来动态创建包含HTML中预定义元素的表格。像下面的东西..

Javascript文件摘要

// get the predefined table heading
var table_heading = $($("#my_table_heading").html());

// append it to the table :: do that in a for loop for all headings
$("#my_table").append(table_heading);

// get the predefined list from HTML
var list = $($("#my_list").html());

// append it to the cell
$("#my_cell").append(list);

我的问题是正确的做法？我是Javascript / jQuery / HTML的新手，所以我想知道如何在其中生成复杂的html结构的最佳实践？

1. 这样可以吗？
2. 有没有更好的框架？

Answer 1

您可以使用小胡子（https://mustache.github.io/）或把手（http://handlebarsjs.com/）等模板库。它们易于维护且易于使用。