Juicer模板渲染举例

Luckily_SY

于 2021-07-18 14:38:58 发布

阅读量339

点赞数 2

分类专栏：笔记文章标签： js html

本文链接：https://blog.csdn.net/weixin_46937852/article/details/118877129

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

当前最新版本: 0.6.14

Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC)。除此之外，它还可以在 Node.js 环境中运行。

你可以在遵守 MIT Licence 的前提下随意使用并分发它。Juicer 代码完全开源并托管在 Github 上，如果你在使用的过程中发现什么 Bug 抑或是一些好的建议都欢迎在 Github Issue 上提交。

Juicer 的引入

<script type="text/javascript" src="juicer-min.js></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"
      name="viewport"
    />
    <title>index</title>
  </head>

  <body>
    <script src="./js/rem.js"></script>
    <div id="app">
      <script id="list-tpl" type="text/template">
        <ul>
          {@each list as it,index}
            <li>${it.name} (index: ${index})</li>
          {@/each}
          {@each blah as it}
            <li>
              num: ${it.num} <br />
              {@if it.num==3}
                {@each it.inner as it2}
                  ${it2.time} <br />
                {@/each}
              {@/if}
            </li>
          {@/each}
        </ul>
      </script>
    </div>

    <script type="text/javascript" src="./js/jquery-1.11.0-min.js"></script>
    <script type="text/javascript" src="./js/juicer-min.js"></script>

    <script type="text/javascript">
      var data = {
        list: [
          { name: ' guokai', show: true },
          { name: ' benben', show: false },
          { name: ' dierbaby', show: true },
        ],
        blah: [
          { num: 1 },
          { num: 2 },
          {
            num: 3,
            inner: [
              { time: '15:00' },
              { time: '16:00' },
              { time: '17:00' },
              { time: '18:00' },
            ],
          },
          { num: 4 },
        ],
      };

      var res = data;
      var a = $('#list-tpl').html(),
        n = juicer(a, res);
      $('#app').html(n);
    </script>
  </body>
</html>

Luckily_SY

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Juicer模板渲染举例

当前最新版本: 0.6.14Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC)。除此之外，它还可以在 Node.js 环境中运行。你可以在遵守 MIT Licence 的前提下随意使用并分发它。Juicer 代码完全开源并托管在 Github 上，如果你在使用的过程中发现什么 Bug 抑或是一些好的建议都欢迎在 Github Issue 上提交。Juicer 的引入<script type="text/
复制链接

扫一扫