Question

以下是一个例子：

http://jsbin.com/joqod/4/edit?html,js,output

App = Ember.Application.create();


App.ApplicationAdapter = DS.FixtureAdapter;



App.Router.map(function() {
  this.route("things");
});


App.Thing = DS.Model.extend({
  name: DS.attr('string')
});


App.ThingsController = Ember.ArrayController.extend({
  
  queryParams: ['status'],
  
  status: "all",
  
  sortAscending: "true",
  
   filteredThings: function() {
     console.log("Inside filteredThings()");
     var things = this.get('model');
     var status = this.get('status');
     
     switch (status) {
       case "open":
         console.log("status is open");
         return things.filterBy('status', 'open').sortBy('name');
       case "closed":
         console.log("status is closed");
         return things.filterBy('status', 'closed').sortBy('name');
       case "all":
         console.log("status is all");
         return things.sortBy('name');
     }
   }.property('model', 'status')
});


App.ThingsRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('thing');
  }
});


App.Thing.FIXTURES = [
  {
    id: 0,
    name: "f",
    status: "open"
  },
  {
    id: 1,
    name: "e",
    status: "open"
  },
  {
    id: 2,
    name: "d",
    status: "open"
  },
  {
    id: 3,
    name: "c",
    status: "closed"
  },
  {
    id: 4,
    name: "b",
    status: "closed"
  },
  {
    id: 5,
    name: "a",
    status: "closed"
  },
];

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="//builds.emberjs.com/tags/v1.7.0/ember.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <script type="text/x-handlebars" data-template-name="application">
  <p>This is the application template.</p>

<ul>
<li>{{#link-to 'things' (query-params status="all")}}All Things{{/link-to}}</li>

<li>{{#link-to 'things' (query-params status="closed")}}Closed Things{{/link-to}}</li>

<li>{{#link-to 'things' (query-params status="open")}}Open Things{{/link-to}}</li>
</ul>


{{outlet}}
</script>

  <script type="text/x-handlebars" data-template-name="index">

  <p>This is the index template.</p>
  
{{outlet}}
</script>

  <script type="text/x-handlebars" data-template-name="things">
<div>
  {{#each thing in filteredThings}}
    <p>{{thing.id}} {{thing.name}}</p>
  {{/each}}
</div>
  
{{outlet}}
</script>
  </body>
</html>

根据查询参数，我想过滤模型，然后更改排序顺序。我能够返回已过滤的模型，但根本无法更改排序顺序。我尝试复制模型，修改现有模型。。。。我偶然发现了这个问题http://emberjs.com/api/#method_computed_sort，但不知道这是不是太过分了，或者只是一个坏主意。

P.S。这个例子不会弄乱查询参数。在将它应用到包含查询参数的现有代码之前，只是试图让一个简单的例子工作，这似乎工作正常。

Answer 1

好的，我不确定这是否是最好的方法，但这就是我解决这个问题的方法。

首先，我修改了您的filteredThings属性，仅过滤项目，而不是尝试排序。然后，我创建了一个计算属性，以根据状态对该过滤器的结果进行排序。然后，我创建了一个可观察的属性来收听status中的更改并在那里设置sortProperty。

查看更新的JSbin。再次，不确定是否有更好的方法，但这就是我解决问题的方法。

（点击关闭的设置降序）。

更新：您实际上并不需要可观察的属性。您可以在filteredThings属性中设置sortProperties。然后，只需绑定到＆＃34; sortedThings＆＃34;，这是filteredThings属性的计算属性。查看更新的JSbin。

在Ember.js中，如何在ArrayController中更改过滤模型的排序顺序？

1 个答案: