美文网首页
express-handlebars 3.0 dom拼接

express-handlebars 3.0 dom拼接

作者: IamaStupid | 来源:发表于2020-07-27 11:10 被阅读0次

handlebars拼接dom的时候,是可以像字符串一样拼接的,比如:有下面这样一个列表,section里面包含五个链接,现在需要把一个Array数据循环出下面的dom。

<section>
    <a> 0 </a><a> 1 </a><a> 2 </a><a> 3 </a><a> 4 </a>
</section>
<section>
    <a> 5 </a><a> 6 </a><a> 7 </a><a> 8 </a><a> 9 </a>
</section>
  

代码:
mod是自定义的求模方法,mod(val1, val2, modVal) 判断val1%val2是否等于modVal。
modEnd是自定义的求模方法,modEnd(val1, val2, modVal) 判断(val1+1)%val2是否等于modVal。

{{#each arrData}}
    {{#mod @index 5 0}}
          <section>
    {{/mod}}
                <a>{{@index}}</a>
    {{!-- 如果是第4 9 14 ... 一列的最后一个的时候,需要结束section --}}
    {{#modEnd @index 5 0}}
          <section>
    {{/modEnd}}
{{/each}}

相关文章

  • express-handlebars 3.0 dom拼接

    handlebars拼接dom的时候,是可以像字符串一样拼接的,比如:有下面这样一个列表,section里面包含五...

  • JavaScript第五天

    创建元素的三种方式 拼接效率测试 数组拼接 createElement DOM的核心总结 关于dom操作,我们主要...

  • express-handlebars

    首先,打开 package.json,添加对 express-handlebars 的依赖: "express-h...

  • 简单的模板引擎

    1.字符串的拼接 举例: 2. jQuery方式 构建 DOM 对象 3. string formate

  • 3.0 DOM基础加强

    DOM是什么?组成部分? document object model 文档对象模型是W3C组织制订的一套用于访问...

  • JavaScript动态向表格中添加数据行

    这是一个比较简单的问题。有两种实现思路:拼接html字符串;操作DOM元素。分别介绍如下。 拼接html字符串 这...

  • jQuery事件

    使用jQ绑定事件bind()方法和unbind() 在3.0的时候已被移除,尽量减少使用。或者不用。通过DOM添加...

  • vue3基本使用

    1、vue3.0生命周期钩子函数 setup 创建实例前 onBeforeMount 挂载DOM前 onMount...

  • handlebar helpers is not a model

    我在使用helps时在网上看了很多文章,有99%的都说helps在express-handlebars是这样使用的...

  • Vue3.0 的性能优化

    1.diff算法优化 vue2.0 中虚拟dom 是全量对比;vue3.0 中新增了静态标记(patchFlag)...

网友评论

      本文标题:express-handlebars 3.0 dom拼接

      本文链接:https://www.haomeiwen.com/subject/mwtzlktx.html