zoukankan      html  css  js  c++  java
  • handlebars.js的运用与整理

    最近在做部门的技术分享网站,主要是一些文章的列表和演讲信息展示,内容比较规律,复用性较高。同事推荐了 handlebars.js。用来看看。

    handlebars.js是一种静态JS模板,用起来还蛮简单的,比如:你想要生成某一大片界面,这一片界面有一定规律。
    比如我的这个网站,都标题,副标题,主讲人,演讲时间,地点,介绍等,虽然内容会有区别,但是结构一样的,所以预写个界面模板,里面凡是有可能变的地方,用变量代替,表达式{{}},然后每次拿不同的数据代入,生成最终的结果HTML。

    handlebars是一个纯js库,因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js

    <script type="text/javascript" src="js/handlebars.js"></script>  
    

    基本语法:

    Handlebars expressions 是handlebars模板中最基本的单元,使用方法是加两个花括号{{value}}, handlebars模板会自动匹配相应的数值,对象甚至是函数。

    可以单独建立一个模板,ID(或者class)和type很重要,因为要用他们来获取模板内容。

    #号来表示Blocks,然后通过{{/表达式}}来结束Blocks

    <script id="nav_template" type="text/x-handlebars-template">
    {{#each nav_list}}
      <a href="{{nav_list_url}}" >{{nav_list_name}}</a>
    {{/each}}
    </script>
    

    JSON数据:

    var nav={
    		"nav_list":[{      //导航列表
    			"nav_list_url":"#nogo",
    			"nav_list_name":"数据基础环境"
    		},{
    			"nav_list_url":"#nogo",
    			"nav_list_name":"应用开发"
    		},{
    			"nav_list_url":"#nogo",
    			"nav_list_name":"数据基础应用"
    		},{
    			"nav_list_url":"#nogo",
    			"nav_list_name":"性能监控"
    		},{
    			"nav_list_url":"#nogo",
    			"nav_list_name":"运行环境"
    		}]
    };

    handlebars会根据上下文来自动对表达式进行匹配,如果匹配项是个变量,则会输出变量的值,如果匹配项是个函数,则函数会被调用。

    Handlebars.compile()方法来预编译模板

    var nav_template=Handlebars.compile($("#nav_template").html());
    $(".nav-data-listin").html(nav_template(nav));
    

    可以用jquery的方式写,也可以用JS写。

    HandleBars还有其他一些内置表达式

    内建Helpers

    with:切换上下文

    each:循环输出上下文中的内容,用this表达式指代单条内容,else表达式当上下文为空时激活

    if:条件表达式

    unless:与if表达式功能相反

    log:输出log

  • 相关阅读:
    mount: can't find cdrom in /etc /fstab or /etc/mtab
    Crontab 的使用方法
    遍历文件夹下的所有文件
    Python将PDF转为TXT
    软件下载链接地址
    在机器上连接数据库
    正则表达式
    python实现给字典添加条目的方法
    urllib2连接超时设置
    数据结构(二)链表
  • 原文地址:https://www.cnblogs.com/chaoli/p/6140523.html
Copyright © 2011-2022 走看看