javascript - mustache 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}}