Question

我有根据下拉选择我要排序的价格清单。我想按升序和降序两种方式对数据进行排序。

在选择“从低到高”时，我想按降序排序价格列表，并选择“从高到低”，我想按升序排序价格清单。

在这里，我将Application fixture传递给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"
                }
            ]
        }
    ]
}
];

我已发布完整代码here(jsfiddle)。能不能帮助我做这个jsfiddle工作吗？

Answer 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就是保持代码DRY的方法。

无法对emberjs中的数据进行排序

1 个答案: