Question

我有一个对象，在传递给Handlebars模板时，它会按默认排序进行迭代，但我想以特定方式排序而不是默认方式。我尝试这种方式就像： -

<div id="some-stuff"></div>

<script id="some-template" type="text/x-handlebars-template">
  <ul>
    {{#test this}}{{/test}}
  </ul>
</script>

辅助

Handlebars.registerHelper('test', function(obj, options) {
  var sortIn = ['red', 'green', 'blue', 'yellow'];
  var rt = '';

  sortIn.forEach(function(entry) {
    for (var i = 0; i < obj[entry].length; i++) {
      rt += '<li><span>' + obj[entry][i] + '</span></li>';
    }
  });

  return rt;
});

var source = $("#some-template").html();
var template = Handlebars.compile(source);

var data = { // want output as red, green, blue and yellow
  'yellow': ['Yellow', 1, 2, 3, 4, 5],
  'green': ['Green', 1, 2, 3, 4, 5],
  'blue': ['Blue', 1, 2, 3, 4, 5],
  'red': ['Red', 1, 2, 3, 4, 5]
};

var html = template(data);
$("#some-stuff").html(html);

但由于某种原因，我对此并不满意，最后，我是循环并将元素传递给模板的人。默认情况下，如果没有使用sortIn的助手，我可以通过#each顺序循环播放此内容。

与此问题有点相似 - Sort object keys with Handlebars

Answer 1

在您的情况下，我会考虑将您的数据转换为包含您的值的对象数组，并将其传递给模板：

var data = [
  { color: 'Yellow', seq: [1,2,3,4,5] },
  { color: 'Red', seq: [6,7,8,9,10] },
  // ...
];

您可以在将数组交给模板之前对其进行排序，方法是提供自定义.sort()功能，该功能可比较两个元素＆＃39; color属性。

在循环Handlebars之前重新排序对象键

1 个答案: