为什么不更改模型也会改变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进一步简化，我将作为练习给读者。