zoukankan      html  css  js  c++  java
  • handlebar

    handlebar的学习

    handlebar是js一个语义模板库,通过对view和data的分离来快速构建web模块。

    在加载的时候就被预编译,而不是到客户端才编译。

    使用方法:

    1,引用

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

    2,建立模板

    需要在<script></script>标签里,匹配项可以是变量,也可以是函数。

      <script id="welfareNewsDeatil-tpl" type="text/x-handlebars-template">
          	<div class="welfare_wrap">
          		<ul class="welfare_list">
          			<li class="welfare_item"><span>项目名称</span><span>{{object.pwProjNm}}</span></li>
          			<li class="welfare_item"><span>起止日期</span><span id="dateText"></span></li>
          			<li class="welfare_item"><span>项目发起机构</span><span>{{object.orgBrnchNm}}</span></li>
          			<li class="welfare_item"><span>覆盖地区</span><span>{{object.provNm}}{{object.cityNm}}</span></li>
          		</ul>
          	</div>
          </script>
    

    3,获取模板,使用Hanlebars.compile()预编译模板

    var welfareNewsDeatil = Util.hdb.compile($('#welfareNewsDeatil-tpl').html());
    //使用requireJS加载handlebarJS

    4,匹配json内容,输入模板

    $('#welfareNewsDeatil').html(welfareNewsDeatil(json))
  • 相关阅读:
    G
    C
    B
    B
    线段树模板
    网络流模板
    POJ_1631_Bridging_Signals_(动态规划,LIS)
    POJ_1065_Wooden_Sticks_(动态规划,LIS+鸽笼原理)
    BZOJ_1015_星球大战_[JSOI2008]_(并查集)
    POJ_3280_Cheapest_Palindrome_(动态规划)
  • 原文地址:https://www.cnblogs.com/fnncat/p/6036113.html
Copyright © 2011-2022 走看看