鬍子JS爲了通過

Question

我知道Mustache是一個「邏輯少」模板腳本，但也許正是我要找的存在...

想象有這樣一個模型：

var users = [{ 
    {name: "Lorem", isOk: false}, 
    {name: "Ipsum", isOk: true}, 
    {name: "Dolor", isOk: false}, 
    {name: "Sit", isOk: false}, 
    {name: "Amet", isOk: true} 
}]; 

當我爲用戶創建模板：

{{#users}} 
    <p>{{name}}</p> 
{{/users}} 

它渲染模型階一切。

是否有機會首先加載isOk: true，然後加載其他的？

我試着用：

{{#users}} 
    {{#isOk}} 
    <p>{{name}}</p> 
    {{/isOk}} 
    {{^isOk}} 
    <p>{{name}}</p> 
    {{/isOk}} 
{{/users}} 

但沒有什麼變化......

Answer 1

的{{#users}}包裝整個列表中，這樣的內容重複的每個元素。 你必須在列表上迭代兩次才能像這樣分割它。

{{#users}} 
    {{#isOk}} 
    <p>{{name}}</p> 
    {{/isOk}} 
{{/users}} 
{{#users}} 
    {{^isOk}} 
    <p>{{name}}</p> 
    {{/isOk}} 
{{/users}} 

當然之前運行了兩次，你可以將列表：

// in js, divide in good & bad, join afterwards 
var goodUsers = [], 
    badUsers = [], 
    sortedUsers = []; 
users.forEach(function(user) { 
    if (user.isOk) { 
    goodUsers.push(user); 
    } else { 
    badUsers.push(user); 
    } 
}); 
sortedUsers = goodUsers.concat(badUsers); 

這樣，你只要使用一次你的代碼，但排序列表進行操作：

{{#sortedUsers}} 
    <p>{{name}}</p> 
{{/sortedUsers}}