javascript - 为什么更改模型不会同时更改 EmberJS 中的 View ？

Question

我有 4 个帖子。每个都有一个标题和一个作者。现在，它是按作者排序的。我想单击一个按钮(例如按标题排序)并让信息按标题而不是按作者排序。

到目前为止，我知道我正在对作者和标题进行排序，并且模型正在更新。问题是在 View 中显示更新的信息。出于某种原因，我假设如果我执行 this.set('model', newModel) 新信息就会自动显示。事实并非如此。

这是我的代码。

练习.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}}

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

controllers/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

不要将模型设置为 Controller 内的其他值。这将不起作用，因为这不是在路由和 Controller 之间设置模型绑定(bind)的方式。模型必须由路线管理。

相反，创建一个名为sortedRows的 Controller 属性，您将从 Controller 操作中更新该属性。更新您的模板以循环排序行。

奖励答案

另一个更惯用的解决方案是，您可以从 Controller 操作中设置排序键，并将sortedRows设置为计算属性，该属性在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}}

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

路由.js

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

奖金

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