H5 Handlebars的簡單使用

H5中都是Html,在這裏咱們沒有el標籤。因此咱們只能藉助模板。好處上面已經介紹了html


掃碼關注公衆號,不按期更新干活這裏寫圖片描述web

web 開發中,js 解析JSON 是常常的事情。很是繁瑣。handlebars 使用了模版,只要你定義一個模版,提供一個json對象,handlebars 就能吧json對象放到你定的模版中,很是方便好用!json

  • H5中都是Html,在這裏咱們沒有el標籤。因此咱們只能藉助模板。好處上面已經介紹了。

  • 第一步:在html中定義模板,將後臺的json放在模板裏。
<script id="task-table-template" type="text/x-handlebars-template">
        {{#each this}}//遍歷循環的格式,至關於foreach
            <a href="{{link}}">//json中的link必須是{{}}格式
                <strong>
                    {{Obj_title}}//同上
                </strong>
            </a>
        {{/each}}
    </script>複製代碼

  • 第二步:在js中實例化這個模板
var myTemplate = Handlebars.compile($("#task-table-template").html());複製代碼

  • 第三步:將後臺json傳進來顯示,並肯定模板顯示位置,下面的列子 將模板顯示在class=notice_srcoll的div上
$('.notice_srcoll').html(myTemplate(data.noticeTasklist));複製代碼

  • 這裏提到的json就是咱們熟悉的json,給一個列子看看
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" }  
        ]};複製代碼

  • handlebar中if else只支持原生態的,也就是隻支持true 和 false 的判斷,可是事實上咱們的邏輯中不少狀況下的判斷並非僅僅就true和false,這個時候咱們這麼辦呢。先看看原生態的if else
{{#if score}}
             <li>
                 <font>
                     <input type="checkbox" name="you" id="{{id}}" class="regular-checkbox big-checkbox" value="{{id}}" checked disabled/>
                     <label for="{{id}}"></label>
                 </font>
                 <div class="li_div">
                     <strong>
                         {{name}}
                     </strong>
                     <p>主講老師
                         {{teacher}}
                     </p>
                 </div>
             </li>
             {{else}}
             <li>
                 <font><input type="checkbox" name="you" id="{{id}}1" class="regular-checkbox big-checkbox" value="{{id}}"  />
                     <label for="{{id}}1"> </label>
                 </font>
                 <div class='li_div'>
                     <strong>
                         "{{name}}"
                     </strong>
                     <p>主講老師
                         {{teacher}}
                     </p>
                 </div>
             </li>
             {{/if}}複製代碼

  • 這裏的判斷就是說score未undefined null false [] 返回的都是false,在這裏並不能判斷分數大小。這個時候咱們經過Handlebars.registerHelper用來定義Helper來對handlebars就醒擴展。
  • html代碼
{{#compare age 20}}
             <tr>
               <td>{{name}}</td>
               <td>{{sex}}</td>
               <td>{{age}}</td>
             </tr>
{{else}}
             <tr>
               <td>?</td>
               <td>?</td>
               <td>?</td>
             </tr>
{{/compare}}複製代碼

  • js對handlebars擴展
//註冊一個比較大小的Helper,判斷v1是否大於v2
         Handlebars.registerHelper("compare",function(v1,v2,options){
           if(v1>v2){
             //知足添加繼續執行
             return options.fn(this);
           }else{
             //不知足條件執行{{else}}部分
             return options.inverse(this);
           }
         });複製代碼

  • 這裏須要說明一下,在利用Handlebars.registerHelper註冊事件時,若是後面的function中沒有傳options的話咱們就能夠直接調用,若是有options的話,咱們須要在前面加上#,由於加上options的話是塊級別的Helper。
  • 事列一
Handlebars.registerHelper("addOne",function(index,options){
                return parseInt(index)+1;
            });複製代碼

  • 調用
<label for="checkbox-2-{{addOne @index}}"></label>複製代碼

  • 事列二
Handlebars.registerHelper("compare",function(v1,v2,options){
           if(v1>v2){
             //知足添加繼續執行
             return options.fn(this);
           }else{
             //不知足條件執行{{else}}部分
             return options.inverse(this);
           }
         });複製代碼

  • 調用
{{#compare age 20}}複製代碼

  • 原聲if還支持多級判斷
{{#if name.xxx}},這樣寫就假設name屬性是一個map,檢測name屬性中是否包含xxx屬性。複製代碼

  • 這裏參考網上一篇博客的案列
{{#sort ages id="ages-list" class="con" }}  
      <span>{{@name}}:{{this}}</span>  
{{/sort}}複製代碼

  • 通過編譯後上面這段信息被分裝在options裏了。下面是註冊代碼
//上面的信息在下面的options裏
Handlebars.registerHelper("sort",function(context,options){  
            var i = 0,str="<div id="+ options.hash.id +" class="+ options.hash.class +">";   
            for(;i<context.length;i++){  
               str+=options.fn(context[i],{data:{name:options.data[i]}});  
            }  
            str+="</div>";  
            return str;  
        }); 複製代碼

  • helper中的options包含了那些信息?
- data:能夠在渲染模板時,將其傳進去,如template(context, {data: data}) 。(//這裏後面會涉及)
    - hash : 保存寫模板時,能夠將一些值以key-value對的形式傳進去,好比上面的div裏有ID  和 classs屬性,這兩個都是鍵值對,都會存在options.hash中,這裏咱們能夠當作是map
    - fn : 方法,官方解釋說「options.fn的能夠被認爲是被編譯過的普通handlebars模板,它的調用的執行環境被認爲是‘this’,因此你能夠把this做爲執行上下文去調用它」,這裏存放了上面那個div中的閉環體。什麼是閉環體?所謂閉環體就是有開有閉,上面div裏那個span就是閉環體,<zzz></zzz>形如這樣的就是閉環體。
    - inverse : 給if的block的else來用的.說白了就是給{{else}}使用的。複製代碼
  • 數據源及模板渲染
var template = Handlebars.compile($("#people-template").html());  
var temp = {ages:[23,24,56,64]}  
var result = template(temp,{data:["tom","jak","lili","jim"]});  
  
/*result:  
<div id="ages-list" class="con">  
<span>jak:24</span>    
<span>lili:56</span>    
<span>jim:64</span>   
</div>複製代碼

  • 模板渲染中用到var result = template(temp,{data:["tom","jak","lili","jim"]});就是在渲染時傳入data數據.正常狀況下傳遞一個json數據,當傳兩個json了,第二個json裏的數據就是替換模板中的佔位符的({{@...}}這種寫法的佔位符).
  • str+=options.fn(context[i],{data:{name:options.data[i]}});這句話就是將模板渲染時傳入的數據中的name字段付給{{@name}}這個佔位符。context[i]就是傳給文中{{this}}也就是至關於{{ages}}的。在渲染時必定要匹配,好比個人數據源是ages那就必定要用ages,那爲何我上面用的是{{this}},由於我在div中的ages,因此div下面的上下文this指代的就是ages.

  • 模板
{{#each comments}}
    <div class="comment">
      <h2>{{subject}}</h2>
      {{{body}}}
    </div>
  {{/each}}複製代碼

  • 在上面的模板中看出,咱們遍歷出的是div,div自己就是閉環體,都在咱們的options.fn中,因此咱們的helper就直接遍歷就好了。
Handlebars.registerHelper('each', function(context, options) {
  var ret = "";

  for(var i=0, j=context.length; i<j; i++) {
    ret = ret + options.fn(context[i]);
  }

  return ret;
});複製代碼

  • 根據這個咱們徹底能夠寫出更加高級的遍歷
  • 模板
{{#list nav}}
  <a href="{{url}}">{{title}}</a>
{{/list}}複製代碼

  • helper 不難看出a 是閉環體,也就是咱們傳入值,options.fn中就自動有,咱們須要作的是加上
      ,並在每一項上加上
    • 閉環體。這樣就顯的更加有規格了。這也是官網上提供的。
    Handlebars.registerHelper('list', function(context, options) {
      var ret = "<ul>";
    
      for(var i=0, j=context.length; i<j; i++) {
        ret = ret + "<li>" + options.fn(context[i]) + "</li>";
      }
    
      return ret + "</ul>";
    });複製代碼

    • 模板中的空白能夠忽略,mustache聲明的兩邊均可以,只需添加一個 ~ 字符便可。寫了這個以後,這一邊的全部空白都會被移除,直到最近的Handlebars表達式或這一邊的非空白字符
    {{#each nav ~}}
      <a href="{{url}}">
        {{~#if test}}
          {{~title}}
        {{~^~}}
          Empty
        {{~/if~}}
      </a>
    {{~/each}}複製代碼

    {
      nav: [
        {url: 'foo', test: true, title: 'bar'},
        {url: 'bar'}
      ]
    }複製代碼

    • 得出的結果沒有換行,也沒有格式化用的空白符:
    <a href="foo">bar</a><a href="bar">Empty</a>複製代碼

    部分資料參考!!!微信

    掃碼關注公衆號,不按期更新干活這裏寫圖片描述ui

    加入戰隊this

    加入戰隊

    微信公衆號

    微信公衆號

    相關文章
    相關標籤/搜索