如何使用鍵對象中的ractive實例數據進行排序？

Question

目標是顯示從REST API調用接收到的排序數據，並在數據更新時保持它們排序。

第一個渲染似乎是通過自身對數據進行排序而不需要排序功能。但是當數據根據使用ractive.set方法的後續調用結果更新時，我無法理解這種奇怪的行爲。即使更新對象的值（100）實際發生了更改，更新後的對象仍保留在更新對象中重複的鍵（2012）的「索引」。

將其重置爲原始值現在會混淆它最初呈現模板的順序。

代碼片段有一個按鈕，用於模擬用新數據替換內容以及用於重置爲原始數據的按鈕。當這兩個變化發生時，我如何實現我的目標。有沒有更激動人心的方式來做到這一點？

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 
 
    }); 
 
});

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

<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>

對象的

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 } 
];