Question

目标是显示从REST API调用接收的排序数据，并在数据更新时对其进行排序。

第一个渲染似乎是自己对数据进行排序而不需要排序功能。但是，当使用ractive.set方法根据后续调用的结果更新数据时，我无法理解这种奇怪的行为。更新的对象保留了索引＆＃39;在更新后的对象中重复的密钥（2012），即使其值（100）实际发生了变化。

将其重置为原始值现在会弄乱它最初呈现模板的顺序。

代码段有一个模拟用新数据替换内容的按钮和一个用于重置为原始数据的按钮。当这些变化发生时，我如何实现我的目标。有没有更有意义的方法来做到这一点？

＆＃13;

var firstList = {
  2014: { count: 10 },
  2013: { count: 20 },
  2012: { count: 30 },
  2011: { count: 50 }
};
var ract = new Ractive({
  template: "#template",
  el: "#output",
  data: {
    shuts: firstList,
    sort: function(obj) {
      const ordered = {};
      Object.keys(obj).sort().forEach(function(key) {
        ordered[key] = obj[key];
      });
      return ordered;
    }
  }
});

$('.change').on('click', function(e) {
  ract.set('shuts', {
    2010: { count: 1 },
    2012: { count: 100 },
    2017: { count: 17 }
  });
});

$('.reset').on('click', function(e) {
  ract.set({
    shuts: firstList
  });
});

＆＃13;

.item .year,
.item .count {
  margin: 10px;
}

＆＃13;

<script src="https://cdn.jsdelivr.net/ractive/0.8.12/ractive.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="output"></div>
<button class="change">Change</button>
<button class="reset">Reset</button>
<script id="template" type="text/html">
  <p>Sorted by Year</p>
  {{#sort(shuts):year}}
  <div class="item">
    <span class="index">{{@index}}</span>
    <span class="year">{{year}}</span>
    <span class="count">{{shuts[year].count}}</span>
  </div>
  {{/}}
</script>

＆＃13;

Answer 1

对象的JavaScript does not guarantee the order of the keys，Ractive也不是。实施也是特定于供应商的。跨浏览器无法保证实施的一致性。

如果关注订单，请考虑改用数组。

var firstList = [
  { year: 2014, count: 10 },
  { year: 2013, count: 20 },
  { year: 2012, count: 30 },
  { year: 2011, count: 50 }
];

如何通过键对对象中的ractive实例数据进行排序？

1 个答案: