首页 > Web开发 > 详细

轻量的前端渲染模板JsRender

时间:2019-11-08 22:40:42      阅读:90      评论:0      收藏:0      [点我收藏+]

JsRender,Best-of-breed templating Simple and intuitive, powerful and extensible, lightning fast.
简单易用,上手快!提升前端开发效率。

示例

<!DOCTYPE html>

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://www.jsviews.com/download/jsrender.min.js"></script>
  <link href="https://www.jsviews.com/samples/samples.css" rel="stylesheet" />
</head>
<body>

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

<script id="theTmpl" type="text/x-jsrender">
<div>
   <em>Name:</em> {{:name}}
   {{if showNickname && nickname}}
      (Goes by <em>{{:nickname}}</em>)
   {{/if}}
</div>
</script>

<script>
var data = [
  {
    "name": "Robert",
    "nickname": "Bob",
    "showNickname": true
  },
  {
    "name": "Susan",
    "nickname": "Sue",
    "showNickname": false
  }
];

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

var htmlOutput = template.render(data);

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

</body>
</html>

运行结果(对模板中的内容进行渲染)

Name: Robert (Goes by Bob)
Name: Susan

轻量的前端渲染模板JsRender

原文:https://www.cnblogs.com/ihappycat/p/11823274.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!