JsRender练习总结

1.假设的数据，基础部分。

  <div id="list1"></div>

            <script type="text/tmp" id="tmp5">

                 {{for}}

                <li>id:{{:ID}} name:{{:Name}}</li>

                {{/for}}

           </script>

var arr = [

    { ID: 1, Name: "tom" },

    { ID: 2, Name: "jack" },

    { ID: 3, Name: "lucy"}

];

var html = $("#tmp5").render(arr);

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

2.jsrender中form和if判断。数据循环中，这是赋值：

  $(".table2").append($("#tmp2").render(item.rankingList));

<table border="1" class="table2">

                    <tr>

                        <td>Data1</td>

                        <td>Data2</td>

                        <td>Data3</td>

                        <td>Data4</td>

                        <td>Data5</td>

                        <td>Data6</td>

                    </tr>

          <!-- <div id="list2"></div>-->

           <script type="text/tmp" id="tmp2">

                    {{for #data}}

                    <tr>

                        <td>{{:#getIndex()+1}}</td><!--排行的个数-->

                        <td>{{:activityUserNumber}}</td>

                        <td>{{:nickname}}</td>

                        <td>{{:numberSum}}</td>

                        <td><p>my name is : {{:nickname}}</p>

                            <p>

                                {{if numberSum>100}}

                                入选

                                {{else}}

                                未入选

                                {{/if}}

                            </p>

                        </td>

                    </tr>

                    {{/for}}

           </script>

             </table> 

 var activityId="79479680213712896";

              $.ajax({

              type: "GET",

              url:"http://voteapi.51odear.com/wx/worksDetail/Ranking?activityId="+ activityId,

              dataType:'json',

              success: function(data){

                        var item=data.data;

                        console.log(item.rankingList)

                        $(".table2").append($("#tmp2").render(item.rankingList));

                       /* $("#list2").html($("#tmp2").render(item.rankingList));*/

            },error:function (msg) {

                 alert("error"+JSON.stringify(msg));

              }

        });

3.分离for，此处使用 tmpl=“#xx”。这个是分离的script的id值~即可。hobbies此处是隐藏

<script type="text/tmp" id="tmp2">

                    {{for #data}}

                    <tr>

                        <td>{{:#getIndex()+1}}</td><!--排行的个数-->

                        <td>{{:activityUserNumber}}</td>

                        <td>{{:nickname}}</td>

                        <td>{{:numberSum}}</td>

                        <td>{{for tmpl="#tmp3" /}}</td>

                    <td>{{for hobbies tmpl="#tmp3"/}}</td><!--hobbies此处是隐藏-->

                    </tr>

                    {{/for}}

           </script>

             </table>

<script type="text/tmp" id="tmp3">

                <p>my name is : {{:nickname}}</p>

                    <p>我是:

                      {{if numberSum>100}}

                         入选

                        {{else}}

                         未入选

                      {{/if}}

                 </p>

       </script>