jsrender for 标签

 

for object使用

1.为进入object中直接使用其中的属性

<div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">
<div>
  {{:name}} lives in
  {{for address}}
    <b>{{>city}}</b>
  {{/for}}
</div>
</script>

<script>
var data = [
  {
    "name": "Pete",
    "address": {
      "city": "Seattle"
    }
  },
  {
    "name": "Heidi",
    "address": {
      "city": "Sidney"
    }
  }
];

var template = $.templates("#theTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);
</script>

 

2.切入模版

<body>

<script id="peopleTemplate" type="text/x-jsrender">
  <div>
    {{:name}} lives in {{for address tmpl="#addressTemplate" /}}<!--切入其他模版-->
  </div>
</script>

<script id="addressTemplate" type="text/x-jsrender">
  <b>{{>city}}</b>
</script>

<div id="result"></div>

<script>
var people = [
  {
    "name": "Pete",
    "address": {
      "city": "Seattle"
    }
  },
  {
    "name": "Heidi",
    "address": {
      "city": "Sidney"
    }
  }
];

var html = $("#peopleTemplate").render(people);

$("#result").html(html);
</script>

</body>

 

 

 2.for array的使用，为循环标签

<body>

<div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">
<b>{{:title}}</b>
<ul>
  {{for members}}
      <li>{{:name}} lives in <b>{{:address.city}}</b></li>
  {{/for}}
</ul>
</script>

<script>
var data = {
  "title": "The A team",
  "members": [
    {
      "name": "Pete",
      "address": {
        "city": "Seattle"
      }
    },
    {
      "name": "Heidi",
      "address": {
        "city": "Sidney"
      }
    }
  ]
};

var template = $.templates("#theTmpl");
var htmlOutput = template.render(data);
$("#result").html(htmlOutput);
</script>

</body>

 

 

 

 

3.for标签还支持else的判断

else：表示for中的没有值循环或者为空，则进入

{{for members}}
    Name: {{:name}}
{{else}}
    No members...
{{/for}}

 

Conditional blocks: — Render the block content of the {{for}} tag (or referenced template) if the object is defined and is not an empty array, otherwise render the {{else}} block (or template)

<body>

<div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">
<b>{{:title}}</b>
<ul>
  {{for members}}
    <li><b>Name:</b> {{:name}}</li>
  {{else}}
    <li>No members!</li>
  {{/for}}
</ul>
</script>

<script>
var data = [
  {
    "title": "The A team",
    "members": []
  },
  {
    "title": "The B team",
    "members": [
      {
        "name": "Pete"
      }
    ]
  }
];

var template = $.templates("#theTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);
</script>

</body>

 

posted @ 2015-06-13 15:19  243573295  阅读(374)  评论(0)  编辑  收藏  举报