(二)Handlebars练习

  • Handlebar遍历后台返回的数据

    • 使用{{#each data}}{{/each}}进行遍历

      • 遍历student对象

        {{#each student}}
            <tr>
                <td>{{id}}</td>
                <td>{{age}}</td>
                <td>{{nickName}}</td>
            </tr>
         {{/each}}
        

          

    • @index索引
      • 使用@index显示序号,序号从0开始

        {{#each student}}
            <tr>
                <td>{{@index}}</td><!--Handlebars中的索引-->
            </tr>
            {{/each}}
    • 访问对象的子对象
      • 使用userInfo.hobby来获取user对象的子对象信息

        {{#each student}}
            <tr>
                <td>{{userInfo.hobby}}</td>
            </tr>
            {{/each}}  
    • 访问对象的父对象
      • 使用../访问user对象的上级对象

        {{#each student}}
            <tr>
                <td>{{../name}}</td><!--取上一级的数据-->
            </tr>
            {{/each}}
  • Handelbar中的registerHelper
    • 自定义helper

      • 给所以+1,让索引从1开始显示

         //给索引+1
                Handlebars.registerHelper(‘addOne‘,function(index){
                    return index+1;
                });
        

        调用

         <td>{{addOne @index}}</td>
  • 条件控制
    • 使用if进行判断

      • 显示年龄<26或者等于26的学生

        {{#if (filterAge age)}}
            <tr>
                <td>{{age}}</td>
            </tr>
            {{/if}}
        

        还有其他的条件控制,自己学习一下吧,这里不再赘述。

时间: 2024-12-16 12:53:01

(二)Handlebars练习的相关文章

构建基础的JavaScript MVC——视图和模板(二)

一.动态视图 1.现在渲染视图的方式基本上有2种 (1)服务端生成好html: (2)客户端渲染模板,服务端提供JSON数据接口. 2.客户端渲染视图也有2种方式: (1)使用document.createElement创建Dom元素,然后追加到页面: (2)预先定义HTML静态视图,在必要的时候显示和隐藏HTML片段: 二.模板 1.现在,有很多模板可以选择,比如Mustache.Underscore简单模板.Handlebars.EJS等等.模板引擎简单实用的方法,当然可以自己显示一个小的模

emberjs学习二(ember-data和localstorage_adapter)

emberjs学习二(ember-data和localstorage_adapter) 准备工作 首先我们加入ember-data和ember-localstorage-adapter两个依赖项,使用bower install安装这两个插件.如下 "dependencies": { "jquery": "~1.9.1", "ember": "~1.13.10", "handlebars"

js模版引擎handlebars.js实用教程

一.为什么选择Handlebars.js 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需要的信息,构造出一个实体,这个实体中包含了界面需要的所有属性,通常这个实体是由N个表中的字段构成的,俗称vo.由于vo的属性可以是String.List.Map等等等,又可以vo套vo,因此这种方式非常灵活,也非常好用. 在后台对vo进行赋值,通过strut

handlebars使用DEMO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JavaScript HTML Handlebars Template

/********************************************************************* * JavaScript HTML Handlebars Template * 说明: * 最近在折腾PHP发现JavaScript能处理的事情远不止自己目前处理的事情, * 发现有JavaScript HTML框架,这样在GitHub上配合JSON作为配置,就可以自由 * 组合静态网站了. * * 2017-8-24 深圳 龙华樟坑村 曾剑锋 *****

作为一名前端开发工程师,你必须掌握的WEB模板引擎:Handlebars

作为一名前端开发工程师,你必须掌握的WEB模板引擎:Handlebars 一.为什么需要使用模板引擎? 关于为什么要使用模板引擎,按照我常对学生说的一句话就是:不用重复造轮子.. 简单来说,模板最本质的作用是"变静为动",一切利于这方面的都是优势,不利于的都是劣势. 要想很好地实现"变静为动"的目的,有这么几点: 1. 可维护性(后期改起来方便): 2. 可扩展性(想要增加功能,增加需求方便): 3.开发效率提高(程序逻辑组织更好,调试方便): 4.看起来舒服(不容

python接口自动化测试(二)-requests.post()

上一节介绍了  requests.get()  方法的基本使用,本节介绍  requests.post()  方法的使用: 本文目录: 一.方法定义 二.post方法简单使用 1.带数据的post 2.带header的post 3.带json的post 4.带参数的post 5.普通文件上传 6.定制化文件上传 7.多文件上传 一.方法定义: 1.到官方文档去了下requests.post()方法的定义,如下: 2.源码: 3.常用返回信息: 二.post方法简单使用: 1.带数据的post:

二维码扫码积分系统定制开发

微信积分系统 二维码扫码积分系统定制开发找丽姐[158.1816.6626/电微]二维码营销模式系统定制开发 微信扫二维码营销系统开发 扫码领积分系统开发 一.如何实现扫二维码领红包功能? 1.使用扫描二维码领取红包对活动进行设置,包括红包数量.红包金额.促销地区.中奖概率等. 2.将生成的二维码赋到商品上面并赋涂层,一方面可以起到保证二维码的一次性,另一方面也可以引起消费者的好奇心. 3.通过手机微信打开扫一扫,扫码商品二维码关注公众号并领取红包,如果参与分享还可以获得抽奖的机会. 二.微信扫

微信生成二维码 只需一个网址即刻 还有jquery生成二维码

<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text=http://123.net/index.php?s=/Home/Index/yanzheng/mai/{$dange.id}" style="width: 5rem; margin-bottom: 1rem;" > </div> http://qr.tops