Javascript 为什么Ractive.js reset（）和update（）方法会在存在带有array.prototype.sort（）的帮助程序和带有空对象的数据时复制模板

我对一个大模板有一个问题，我想我最终可以在一个小JSFIDLE中复制它。 当存在带有array.prototype.sort（）的帮助程序且数据有如下空对象时，当Ractive.js reset（）和update（）方法复制模板时，我不理解以下行为：

[
   {id : 4, name: "Ringo", username: "Star43"},
   {id : 2, name: "Paul", username: "Pmac44"},
   {id : 1, name: "John", username: "Jony41"},
   {id : 3, name: "George", username: "Harris44"},
   {}
]

我不知道这是一个bug还是一个我不理解的行为

助手是这样的：

       sort : function(arr){
           //return arr
           arr.sort(function(a, b){
               return a.id - b.id
           })
           return arr
       }

如果我取消注释第一个

//return arr

然后reset（）和update（）不复制模板

这是强制性的JSFIDLE：

以及Stackoverflow代码段： 您只需单击“重置”和“更新”按钮

var Section=Ractive.extend({
el:‘集装箱’，
模板：“#表格模板”，
数据：{
标题：[
{id:5，名称：“id”}，
{id:7，name:“name”}，
{id:9，name:“Username”}，
{}
],
行：[
{id:4，名称：“Ringo”，用户名：“Star43”}，
{id:2，姓名：“Paul”，用户名：“Pmac44”}，
{id:1，姓名：“John”，用户名：“Jony41”}，
{id:3，姓名：“乔治”，用户名：“哈里斯44”}，
{}
],
大写：函数（字符串）{
返回字符串。toUpperCase（）
},
排序：函数（arr）{
//返回arr
arr.sort（函数（a，b）{
返回a.id-b.id
})
控制台日志（“arr.length:+arr.length）
控制台日志（arr）
返回arr
}               
}     
});
var rSection=新节（{
}) 
document.querySelector（“#btnreset”）.addEventListener（“单击”，函数（）{rSection.reset（）}，false）
document.querySelector（“#btnupdate”）.addEventListener（“单击”，函数（）{rSection.update（）}，false）

表格，td，th{
边框：1px纯黑；
保证金：5px 5px 5px 5px；
}

{{{#排序（标题）}
{{name}}
{{/headers}}
{{{#排序（行）}
{{id}
{{大写（名称）}}
{{username}}
{{/行}

这肯定是一个bug-以前有过。之所以会出现这种情况，是因为

.sort（）

在渲染原始数组时会对其进行修改，而Ractive会对其进行两次渲染。您可以通过在使用

.slice（）

方法对数组进行排序之前创建数组副本来解决此问题：

function (arr) {
    //return arr
    arr.slice().sort(function (a, b) {
        return a.id - b.id;
    });

    return arr;
}     

---

这当然是一个bug——以前也有过。之所以会出现这种情况，是因为

.sort（）

在渲染原始数组时会对其进行修改，而Ractive会对其进行两次渲染。您可以通过在使用

.slice（）

方法对数组进行排序之前创建数组副本来解决此问题：

function (arr) {
    //return arr
    arr.slice().sort(function (a, b) {
        return a.id - b.id;
    });

    return arr;
}     

---

为什么要对标题进行排序？标题不会改变。如果您将

{{{#排序（标题）}}

更改为仅

{{{#标题}}

我看不到这个问题。@Mathletics有趣，谢谢您的评论。在本例中，头已经被排序，但这个JSFIDLE是一个具有不同且无序头的更大模板的巨大简化。为什么会发生这种情况？为什么要对标题进行排序？标题不会改变。如果您将

{{{#排序（标题）}}

更改为仅

{{{#标题}}

我看不到这个问题。@Mathletics有趣，谢谢您的评论。在本例中，头已经被排序，但这个JSFIDLE是一个具有不同且无序头的更大模板的巨大简化。为什么会这样？谢谢你。我一直在努力解决这个问题，你的回答解决了我与助手之间的问题。我在Github回购协议中提出了一个问题：谢谢。我一直在努力解决这个问题，你的回答解决了我与助手之间的问题。我在Github回购协议中发行了一个问题：