Question

我有一个大模板的问题，我想我终于可以在一个小的jsfiddle中重现它。当有一个带有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"},
   {}
]

我不知道这是一个我不理解的错误或行为。

帮手是：

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

如果我取消注释第一个

//return arr

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

这是强制性的jsfiddle：http://jsfiddle.net/Katio/rfuzxwv8/

Stackoverflow代码片段：您只需点击重置和更新按钮即可。

＆＃13;

    var Section = Ractive.extend({
        el: 'container',
        template: '#table-template',
        data: {
            headers: [
                {id : 5, name: "Id"},
                {id : 7, name: "Name"},
                {id : 9, name: "Username"},
                {}
            ],
            rows : [
            {id : 4, name: "Ringo", username: "Star43"},
            {id : 2, name: "Paul", username: "Pmac44"},
            {id : 1, name: "John", username: "Jony41"},
            {id : 3, name: "George", username: "Harris44"},
            {}
                ],
               capitalize : function(string){
                   return string.toUpperCase()
               },
               sort : function(arr){
                   //return arr
                   arr.sort(function(a, b){
                       return a.id - b.id
                   })
                   console.log("arr.length: " + arr.length)
                   console.log(arr)
                   return arr
               }               
              }     
    });
    var rSection = new Section({        
    }) 
    
    document.querySelector("#btnreset").addEventListener("click", function(){ rSection.reset() }, false )
    
    document.querySelector("#btnupdate").addEventListener("click", function(){ rSection.update() }, false )

＆＃13;

table, td, th{
    border: 1px solid black;
    margin: 5px 5px 5px 5px;
}

＆＃13;

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script type="x-template" id="table-template">
<table>
    <thead>
        <tr>
            {{#sort(headers)}}
            <th> {{name}} </th>          
            {{/headers}}
        </tr>
    </thead>
    <tbody>
        {{#sort(rows)}}
        <tr>
            <td> {{id}} </td>
            <td> {{capitalize(name)}} </td>
            <td> {{username}}</td>            
        </tr>
        {{/rows}}        
    </tbody>        
    <tbody>
    </tbody>    
</table>    
    
    <input type="button" value = "Ractive.reset()" id="btnreset"/>
    <input type="button" value = "Ractive.update()" id="btnupdate"/>
</script>

    <div id="container"></div>

＆＃13;

Answer 1

这肯定是一个错误 - 之前已经a very similar one了。之所以会发生这种情况，是因为.sort()在渲染时会修改原始数组，而Ractive会将其渲染两次。您可以通过在使用.slice()方法对数组进行排序之前创建数组的副本来解决此问题：

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

    return arr;
}

当有一个带有array.prototype.sort（）的帮助器和带有空对象的数据时，为什么Ractive.js reset（）和update（）方法会复制模板

1 个答案: