Question

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

到目前为止，我知道我正在对作者和标题进行排序，并且模型正在更新。问题是在视图中显示更新的信息。出于某种原因，我认为如果我只是mixin，新信息会自动显示。事实并非如此。

这是我的代码。

practice.hbs

this.set('model', newModel)

路由/ practice.js

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

信息肯定正在排序，模型肯定正在更新。它似乎不会显示已排序的信息。

Answer 1

不要将模型设置为控制器内的其他值。这不起作用，因为这不是如何在路由和控制器之间设置模型绑定。该模型必须由路线管理。

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

奖金回答

另一个更惯用的解决方案是，您可以从控制器操作中设置排序键，并使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进一步简化此操作，我将把它作为练习留给读者。

为什么不更改模型也会改变EmberJS中的视图？

1 个答案: