Juicer模板渲染举例

科技前沿 • 2025-03-24 23:42 • 阅读 45

大家好，我是讯享网，很高兴认识大家。

当前最新版本: 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>

Juicer模板渲染举例

相关推荐