每個都帶有把手的手柄

我無法弄清楚帶把手的情況。我的數據是這樣的：每個都帶有把手的手柄

items : [ 
    { 
    name : "foo" 
    }, 
    { 
    name : "bar" 
    }, 
    { 
    name : "bacon" 
    }, 
    { 
    name : "burger" 
    } 
]

在我的模板，我想創建大小爲3的列表，所以最終的HTML應該是這樣的：

<ul> 
    <li>foo</li> 
    <li>bar</li> 
    <li>bacon</li> 
</ul> 
<ul> 
    <li>burger</li> 
</ul>

現在我有這個在我的手把模板：

<ul> 
{{#each items}} 
<li>{{name}}<li> 
{{/each}} 
</ul>

所以我結束了這一點：

<ul> 
<li>foo</li> 
<li>bar</li> 
<li>bacon</li> 
<li>burger</li> 
</ul>

我需要創建一個助手嗎？我如何創建它？像延長默認#each助手和增加一個額外的DOM元素每個X迭代（如0，3，6，9 ...）

感謝

來源

2013-06-19 arlg

感謝您的回答，我更願意將邏輯處理成Handlebar Helper。我設法做到這一點，這裏是代碼：

Handlebars.registerHelper('list', function(context, options) { 

var ret = "", 
    listLength = 3, 
    u = 0; 

for(var i=0, j=context.length; i<j; i++) { 

if(i % listLength === 0 ) { 
    u = 0; 
    ret += '<ul>'; 
} 

ret += options.fn(context[i]); 

if(u === listLength - 1) { // Zero indexed 
    ret +='</ul>'; 
} 

u++; 
} 

return ret; 
});

而且模板：

{{#list items}} 
    <li>{{name}}</li> 
    {{/list}}

來源

2013-06-19 16:29:50 arlg

你需要創建一個自定義幫助：

Handlebars.registerHelper("separateList", function(arr, options) { 
    // Here we only apply one line, but implement your separation logic in here 
    return options.fn(arr[0]); // pass a single arr item here 
});

然後在您的模板：

{{#separateList arr}} 
    <li>{{content}}</li> 
{{/separateList}}

這是基本實現，但你可以任何你需要：

來源

2013-06-19 14:56:47

鴻溝項目陣列到各含三個對象的子陣列，讓我們稱之爲itemsThree。喜歡這樣的：

itemsThree = [ 
    [ 
     { 
      name : "foo" 
     }, 
     { 
      name : "bar" 
     }, 
     { 
      name : "bacon" 
     }  
    ], 
    [ 
     { 
      name: "burger" 
     } 
    ] 
];

（不要手動明顯創建此。）

然後遍歷每個子陣列在它自己的<ul>，並遍歷每個子陣，把對象<li>。

有意義嗎？

來源

2013-06-19 14:59:42

每個都帶有把手的手柄

回答

相關問題