zoukankan html css js c++ java

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>

查看全文

相关阅读:
Jsp的内置标签和jstl标签
 Jsp中的EL表达式
 JSP和servlet结合案例
 Jsp：内置对象和四种域对象的理解
 编码实战Web端联系人的增删改查
 Session案例
 Cookie案例分析
 会话数据的保存——cookie
ServletContext和ServletConfig
Servlet(1)

原文地址：https://www.cnblogs.com/hwaggLee/p/4573557.html