Javascript 为什么'；更改模型也会更改EmberJS中的视图吗？

我有4个帖子。每个人都有一个标题和一个作者。现在，它是按作者排序的。我想点击一个按钮（比如按标题排序），让信息按标题而不是按作者排序

到目前为止，我知道我正在对作者和标题进行排序，模型正在更新。问题是在视图中显示更新的信息。出于某种原因，我假设如果我只做

this.set（'model'，newModel）

，新信息将自动显示。事实并非如此

这是我的密码

实习。哈佛商学院

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

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

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

---

信息正在被分类，模型也在被更新。它只是不显示已排序的信息。

不要将您的模型设置为控制器中的其他值。这将不起作用，因为这不是在路由和控制器之间设置模型绑定的方式。模型必须由路由管理

相反，创建一个名为sortedRows的控制器属性，您将从控制器操作更新该属性。更新模板以循环浏览sortedRows

奖励答案

另一个更惯用的解决方案是，您可以从控制器操作中设置排序键，并使SortDrows成为一个计算属性，当sortKey更改时触发，并返回排序模型

以下的一些变化应该可以工作（我没有测试过）：

模板.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}}

route.js

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

奖金

---

通过使用Ember.computed.sort，您可以进一步简化此操作，我将把它作为练习留给读者。

请查看我的更新答案，其中现在包含一个代码示例，工作起来很有魅力。我自己也不会想到这一点。非常感谢。我还将尝试Ember.computed.sort。如果模型数据可能发生更改，请不要忘记向sortedRows computed属性添加更多依赖键，以便Ember知道何时启动函数问题：为什么要执行

{action（action'sortBy'title'）}

而不仅仅是

{action'sort'By'title}

？如果我移除它，似乎没有什么区别。这是一个关闭动作。我在这种情况下使用闭包操作的原因是它允许我使用参数“curry”函数调用，在本例中为“title”。如果我使用了另一种格式，我将无法通过模板将参数传递给函数。我在编写的代码中看不到这一行。但要增加一点关于计算属性的信息——它们是惰性地计算和缓存的。如果模型数据发生更改，将重新计算计算的属性，但仅当其值在某个位置被消耗时。在这种情况下，该值将在模板中使用。

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