博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
handlebars的使用
阅读量:5097 次
发布时间:2019-06-13

本文共 1995 字,大约阅读时间需要 6 分钟。

web 开发中,js 解析JSON 是经常的事情。非常繁琐。handlebars 使用了模版,只要你定义一个模版,提供一个json对象,handlebars 就能吧json对象放到你定的模版中

html代码

                  
Handlebars demo

Simple handlebars demo

Handlebars Helpers demo

 js代码

$(document).ready(function(){          Handlebars.registerHelper('fullName', function(person) {            return person.firstName + " " + person.lastName;          });        $("#btn_simple").click(function(){          // $(this).hide();          showTemplate();        });         $("#btn_helper").click(function(){                showHowUseHelper();        });      });      // var context = {title: "My New Post", body: "This is my first post!"};      var persion = {title :"My New Post",body:"This is my first post!"}      function showTemplate(){          var source   = $("#some-template").html();          var template = Handlebars.compile(source);            var data = { users: [                {username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },                {username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" },                {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }              ]};            $("#my_div").html(template(data));;      }            function showHowUseHelper(){          var context = {            author: {firstName: "Alan", lastName: "Johnson"},            body: "I Love Handlebars",            comments: [{              author: {firstName: "Yehuda", lastName: "Katz"},              body: "Me too!"            }]          };          var source   = $("#helper-template").html();          var template = Handlebars.compile(source);          $("#helper_div").html(template(context));;                }

 

转载于:https://www.cnblogs.com/zhuiluoyu/p/4635052.html

你可能感兴趣的文章
java SE :标准输入/输出
查看>>
一些方便系统诊断的bash函数
查看>>
【转载】基于vw等viewport视区相对单位的响应式排版和布局
查看>>
<转>关于MFC的多线程类 CSemaphore,CMutex,CCriticalSection,CEvent
查看>>
jquery中ajax返回值无法传递到上层函数
查看>>
css3之transform-origin
查看>>
[转]JavaScript快速检测浏览器对CSS3特性的支持
查看>>
Master选举原理
查看>>
[ JAVA编程 ] double类型计算精度丢失问题及解决方法
查看>>
小别离
查看>>
微信小程序-发起 HTTPS 请求
查看>>
WPF动画设置1(转)
查看>>
backgound-attachment属性学习
查看>>
个人作业——关于K米的产品案例分析
查看>>
基于node/mongo的App Docker化测试环境搭建
查看>>
java web 中base64传输的坑
查看>>
java 中的线程(一)
查看>>
秒杀9种排序算法(JavaScript版)
查看>>
素数判断BFS之“Prime Path”
查看>>
Activiti入门 -- 环境搭建和核心API简介
查看>>