爲什麼不更改模型也會改變EmberJS中的視圖？

Question

我有4個帖子。每個人都有一個標題和一個作者。現在，它按作者排序。我想點擊一個按鈕（比如按標題排序），並按照標題而不是作者對信息進行排序。

到目前爲止，我知道我正在整理作者和標題，並且模型正在更新。問題是在視圖中顯示更新的信息。出於某種原因，我認爲如果我只是做了this.set('model', newModel)這個新信息會自動顯示。事實並非如此。

這是我的代碼。

practice.hbs

{{outlet}} 


<button {{action "sortTitles"}}>Sort by Title</button> 
<button {{action "sortAuthors"}}>Sort by Author</button> 
{{#each model as |post|}} 
    <h2>Title: {{post.title}}</h2> 
    <h3>Author: {{post.author}}</h3> 
{{/each}} 

路由/ practice.js

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model() { 
     var myArray = [{ 
      title: "Learning EmberJS", 
      author: "Erik Hatchett" 
     },{ 
      title: "Controllers are Dead", 
      author: "Frank Treacy" 
     },{ 
      title: "Diddly Doo", 
      author: "No I'm Adrian" 
     },{ 
      title: "Yisss", 
      author: "Dank Sir" 
     }]; 

     myArray.sort(function(a,b) { 
      if (a.author > b.author) { 
       console.log(a + " is greater than " + b); 
       return 1; 
      } 
      else { 
       console.log(b + " is greater than " + a); 
       return -1; 
      } 
     }); 

     if ("dat" < "cat") { 
      console.log("ayy"); 
     } 

     console.log(myArray[2]); 
     return myArray; 
    } 
}); 

控制器/ practice.js

import Ember from 'ember'; 

var sortByAuthor = function(a,b) { 
      if (a.author > b.author) { 
       console.log(a + " is greater than " + b); 
       return 1; 
      } 
      else { 
       console.log(b + " is greater than " + a); 
       return -1; 
      } 
     }; 

var sortByTitle = function(a,b) { 
      if (a.title > b.title) { 
       console.log(a + " is greater than " + b); 
       return 1; 
      } 
      else { 
       console.log(b + " is greater than " + a); 
       return -1; 
      } 
     }; 



export default Ember.Controller.extend({ 

    actions: { 
     sortAuthors() { 
      var myModel = this.get('model'); 
      console.log(myModel[0].author); 
      myModel.sort(sortByAuthor); 
      console.log(myModel[0].author); 
      this.set('model', myModel); 
     }, 
     sortTitles() { 
      var myModel = this.get('model'); 
      myModel.sort(sortByTitle); 
      console.log(myModel[0].title); 
      this.set('model', myModel); 
     } 
    } 
}); 

這些信息絕對正在排序，模型肯定正在更新。它似乎不顯示排序的信息。

Answer 1

不要將您的模型設置爲控制器內的其他值。這不起作用，因爲這不是如何在路線和控制器之間建立模型綁定。模型必須由路線管理。

相反，創建一個名爲sortedRows的控制器屬性，您將從控制器操作更新控制器屬性。更新您的模板以遍歷sortedRows。

獎金答案

另外，更地道的解決方案是，你可以設置從控制器動作排序關鍵字，並有sortedRows是計算機屬性，火災時，SORTKEY變化，並返回排序的模型。

以下的一些變化，就可以（我沒有測試過這一點）：

template.hbs

<button {{action (action 'sortBy' 'title')}}>Sort by Title</button> 
<button {{action (action 'sortBy' 'author')}}>Sort by Author</button> 

{{#each sortedRows as |row|}} 
    <h2>Title: {{row.title}}</h2> 
    <h3>Author: {{row.author}}</h3> 
{{/each}} 

controller.js

export default Ember.Controller.extend({ 
    sortKey: 'author', // or whatever you want the default sort to be 
    sortedRows: Ember.computed('sortKey', function() { 
    return this.get('model').sortBy(this.get('sortKey')); 
    }, 

    actions: { 
    sortBy(sortKey) { 
     this.set('sortKey', sortKey); 
    } 
    } 
}); 

route.js

export default Ember.Route.extend({ 
    model() { 
    return [...]; 
    } 
}); 

紅利獎勵

您可以通過使用Ember.computed.sort進一步簡化，我將作爲練習給讀者。