jsrender遍历json 代码示例

jsrender是一个JavaScript模板引擎，它可以通过遍历JSON数据并将数据渲染到HTML模板中。下面是一个示例代码，展示了如何使用jsrender遍历JSON数据并渲染到HTML模板中。

我们需要在HTML页面中引入jsrender库。可以通过以下代码将jsrender库引入到页面中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.0-beta/jsrender.min.js"></script>

接下来，我们需要准备一个HTML模板，用于展示JSON数据。可以在HTML页面中定义一个带有特定id的`<script>`标签，用于存放模板。例如：

<script id="template" type="text/x-jsrender">
    <div>
        <h2>{{:name}}</h2>
        <p>{{:age}}</p>
    </div>
</script>

在这个模板中，我们使用了`{{:name}}`和`{{:age}}`这样的占位符来表示JSON数据中的属性。

接下来，我们可以在JavaScript代码中使用jsrender来遍历JSON数据并渲染到HTML模板中。我们需要获取到JSON数据，可以通过ajax请求或其他方式获取，这里我们假设已经有一个名为`data`的JSON对象：

var data = [
    { name: "John", age: 25 },
    { name: "Jane", age: 30 },
    { name: "Bob", age: 35 }
];

然后，我们需要将数据和模板进行绑定，并使用`render`方法将数据渲染到HTML模板中。可以使用以下代码实现：

var template = $("#template").html();
var html = $.templates(template).render(data);

在这段代码中，我们首先通过`$("#template").html()`获取到模板的内容，然后使用`$.templates(template)`将模板和数据进行绑定，最后使用`render`方法将数据渲染到HTML模板中。

我们可以将渲染后的HTML代码插入到页面中的指定位置。例如，可以将渲染后的HTML代码插入到id为`container`的元素中：

$("#container").html(html);

通过以上步骤，我们就可以使用jsrender遍历JSON数据并将数据渲染到HTML模板中了。