1

我有价格列表，我想根据下拉列表的选择对其进行排序。我想以升序和降序两种方式对数据进行排序。

在选择“从低到高”时，我想按降序对价格列表进行排序，在选择“从高到低”时，我想按升序对价格列表进行排序。

在这里，我将Application夹具传递给index路线模型，并且Astcart.IndexController我正在尝试对数据进行排序，但它抛出了一个错误Uncaught TypeError: Object [object Object] has no method 'sort' 

Astcart.IndexRoute = Ember.Route.extend({
   model: function() {
      return Astcart.Application.find();
   }
}); 

Astcart.IndexController = Ember.ArrayController.extend({
    sortingMethod: null,
    sortingOptions: [
        {option: "Best Match", id: 0},
        {option: "Low to High",    id: 1},
        {option: "High to Low",    id: 2}
    ],

    sortProperties: ['product_price'],
    sortAscending: true,
    sortingMethodDidChange: function() {            
      if(this.get('sortingMethod') == 1){
             alert("sort data in descending order");
      }else if (this.get('sortingMethod') == 2){
              alert("sort data in ascending order");
      }
      var content = this.get("content");
         this.set('content', Ember.copy(content.sort(), true));
      }.observes('sortingMethod')   
});

夹具：

Astcart.Application.adapter = Ember.FixtureAdapter.create();

Astcart.Application.FIXTURES=[
{
    "home_products": [
        {
            "id": "1",
            "name": "Mobiles & Accessories",
            "contents": [
                {
                    "id": "1",
                    "price": "1"
                },
                {
                    "id": "2",
                    "price": "2"
                },
                {
                    "id": "3",
                    "price": "3"
                },
                {
                    "id": "4",
                    "price": "4"
                }
            ]
        },
        {
            "id": "2",
            "name": "Mobiles & Accessories",
            "contents": [
                {
                    "id": "41",
                    "price": "5"
                },
                {
                    "id": "5",
                    "price": "6"
                },
                {
                    "id": "6",
                    "price": "7"
                },
                {
                    "id": "7",
                    "price": "8"
                }
            ]
        },
        {
            "id": "3",
            "name": "Mobiles & Accessories",
            "contents": [
                {
                    "id": "8",
                    "price": "9"
                },
                {
                    "id": "9",
                    "price": "10"
                },
                {
                    "id": "10",
                    "price": "11"
                },
                {
                    "id": "11",
                    "price": "12"
                }
            ]
        }
    ]
}
];

我在这里（jsfiddle）发布了完整的代码。任何人都可以帮助我使这个jsfiddle工作吗？

4

1 回答 1

1

看起来你让事情变得比他们必须的更复杂。

我在这里做了一个简化的解决方案：http: //jsfiddle.net/SFNBB/4/

一些对未来有用的东西可以记住。

1）您在夹具数据中使用字符串文字

{
    "id": "8",
    "price": "9"
}

如果你想正确排序，你必须使用实数，像这样

{
    "id": 8,
    "price": 9
}

2）我认为你应该通过改变模型的外观来改变你获得产品的方式，还要记住你应该用单数来定义它们，Product而不是Products。

Astcart.Group = Ember.Model.extend({
    id: Ember.attr(),
    name: Ember.attr(),
    products: Ember.hasMany('Astcart.Product', {key: 'products'})
});   

Astcart.Product = Ember.Model.extend({
    id: Ember.attr(),
    price: Ember.attr(),
    group: Ember.belongsTo('Astcart.Group', {key: 'group_id'})
});

Astcart.Group.FIXTURES = [
{
    "id": 1,
    "name": "Mobiles & Accessories 1"
}
];

Astcart.Product.FIXTURES = [
{
    "group_id": 1,
    "id": 1,
    "price": 1
}

3）现在您可以使用模型钩子获取所有产品：

Astcart.IndexRoute = Ember.Route.extend({
    model: function() {
        return Astcart.Product.find();
    }
});

并像这样遍历结果。

<ul>
{{#each controller}}  
    <li>
        {{price}}
        ({{group.name}})
    </li>
{{/each}}
</ul>

4）最后这就是我选择控制排序的方式

Astcart.IndexController = Ember.ArrayController.extend({
    sortingMethod: 0,
    sortingOptions: [
        {option: "Best Match",  id: 0, property: 'id', asc: true},
        {option: "Low to High", id: 1, property: 'price', asc: true},
        {option: "High to Low", id: 2, property: 'price', asc: false}
    ],
    currentOption: function() {
        return this.get('sortingOptions')[this.get('sortingMethod')];
    },
    sortProperties: function() {
        return [this.currentOption().property];
    }.property('sortingMethod'),
    sortAscending: function() {
        return this.currentOption().asc;
    }.property('sortingMethod')
});

我在其中添加了一些额外的属性，sortingOptions以便您可以控制应如何定义排序，currentOption只是作为保持代码干燥的方法。

于 2013-09-08T16:50:30.827 回答