jsonp - 通过javascript中的模板进行parsejson渲染

Question

我有 parseJson 对象如下...

parseJSON([
{"BOOK_Name":"AAA”,"quickRead":[{"Page_Heading":"AAA-heading","Page_Url":"http://rtrt.com"},{"Page_Heading":"AAA-heading2","Page_Url":"http://bghfhghf.com"}]},
{"BOOK_Name":"BBB","quickRead":[{"Page_Heading":"BBB-heading","Page_Url":"http://dsdfdf.com"},{"Page_Heading":"BBB-heading2","Page_Url":"http://rtrtdfdf.com"}]}
]}

我可以使用 javascript jsrender 在 tbody 元素中部分渲染它，如下所示......

元素？

$('tbody', '#bookTemplateTable').html($('#bookTemplate').render(data));

相同的模板如下：

<script id="bookTemplate" type="text/html">
    <tr>
      <td>{{=BOOK_Name}}</td>

      <td> 
        <ul>
          <li> .. render 1st quickread value .. </li>
          <li> .. render 1st quickread value .. </li>
        </ul> 
      </td>
    </tr>  
</script>

有人可以帮忙吗？

Answer 1

你最好看看jsrender 演示页面。在那里您可以学习如何使用模板标签。

首先，你应该使用

{{>propertyName}}
{{:propertyName}}

来显示数据。有关何时使用什么的说明，请参阅此演示。

对于您的特定情况，这是有效的模板：

<script id="bookTemplate" type="text/html">
    <tr>
      <td>{{>BOOK_Name}}</td>

      <td> 
        <ul>
          {{for quickRead}}
            <li><a href="{{>#data.Page_Url}}">{{>#data.Page_Heading}}</a></li>
          {{/for}}
        </ul> 
      </td>
    </tr>  
</script>

工作示例可以在这里找到：

http://jsfiddle.net/EGFbq/