2012-03-21 98 views
2

我想創建一個像{{#each}}一樣工作的句柄幫助程序,但給了我指定一個數字的可能性,以便每運行一個附加代碼即可實現每個n迭代。對包中的數組進行迭代

我需要這個的原因是我需要吐出三個項目的行中的內容,所以我需要打開和關閉一個新的容器div的每三個項目。

當然,我可以簡單地讓骨幹格式的三個項目包陣列和迭代,使用{{#each}},但我認爲這將是更優雅,以創建一個幫助,這樣我可以這樣說

{{#each_pack data 3}} 
    <div class="container"> 
    {{#each pack_items}} 
    <span>{{content}}</span> 
    {{/each}} 
    </div> 
{{/each_pack}} 

我不完全確定如何做到這一點。 如何讓pack_items可用於內部區塊?

+0

我不認爲鬍鬚語法會與你正在嘗試的舒適。我認爲模式是將這種_logic_移出模板。你可以使用'Decorator'來爲你的'Model'提供這種_meta attributes_。或者添加一個[toJSONDecorated方法到你的模型](http://stackoverflow.com/questions/9642439/computed-properties-in-backbone/9687672#9687672) – fguillen 2012-03-21 12:56:32

+1

我總是看到更多的邏輯方法來強迫你爲模板中通常要做的事情編寫助手,比如遍歷數組並使用模運算符來確定是否有新行開始,以提高可重用性和更乾淨的模板,而不是將所有邏輯移動到部分提供數據的應用程序。因此,爲這種經常出現的情況寫一個幫手。 – TheShellfishMeme 2012-03-21 13:38:07

回答

1

我解決了這個問題,讓我可以使用我剛剛提出的完全相同的語法。 這裏是代碼:

window.Handlebars.registerHelper('each_pack', function(context, packsize, fn){ 
    var ret = ''; 

    /* 
     Function that creates packages of size 
     packsize from a given array 
    */ 
    var packagify = function(array, packsize){ 
     var i = 0; 
     var length = array.length; 

     var returnArray = []; 
     var pack = []; 
     while(i < length){ 
      /* 
       If this is not the first entry, 
       if this is the packsize-d entry 
       or this is the last entry, 
       push the pack to the return array 
       and create a new one 
      */ 

      if(((i % packsize) == 0 && i != 0) || (i == (length - 1))){ 
       returnArray.push(pack); 
       pack = []; 
      } 
      pack.push(array[i]); 
      i++; 
     } 
     return returnArray; 
    } 

    var packArray = packagify(context,packsize); 

    for(var i = 0; i < packArray.length; i++){ 
     var pack = packArray[i]; 

     this['pack_items'] = pack; 
     ret = ret + fn(this); 
    } 

    delete this['pack_items']; 
    return ret; 
}); 
+0

是的,它看起來不錯,但仍然工作,因爲你正在使用[下劃線模板](http://documentcloud.github.com/underscore/#template)..不是真正的[小鬍子模板](http://小鬍子.github.com/mustache.5.html)。不要說是錯的只是想指出細節。 – fguillen 2012-03-21 14:55:26