javascript - 主干菜单未排序

Question

我无法正确排序 Backbone 集合。我继承了该项目，因此其他地方可能存在一些恶作剧，但我想排除我的任何语法错误。

该项目使用 JSON 文件来处理数据:

"classifications": [
            {
                "name": "1 Bedroom",
                "alias": "1BR",
                "id": "1BR",
                "menu_desc": "Residences"
            },
            {
                "name": "2 Bedroom",
                "alias": "2BR",
                "id": "2BR",
                "menu_desc": "Residences"
            },
            {
                "name": "3 Bedroom",
                "alias": "3BR",
                "id": "3BR",
                "menu_desc": "Residences"
            },
            {
                "name": "4 Bedroom",
                "alias": "4BR",
                "id": "4BR",
                "menu_desc": "Residences"
            },
            {
                "name": "Common Areas",
                "alias": "Common",
                "id": "Common",
                "menu_desc": "Resident Amenities"
            }
        ]

之前没有一居室单位，渲染的顺序是这样的:

我添加了一居室分类，突然顺序是这样的:

我做了一些挖掘并找到了有关比较器属性的文档，但它似乎仅适用于集合。该项目不使用集合进行分类。它适用于子菜单项(设备所在楼层等)，但不适用于主菜单:

    var MenuClassificationListView = Backbone.View.extend({
    id: "classification_accordion",
    template: _.template( "<% var classifications = this.options.classifications; _.each(this.collection.attributes, function(v,k) { %>"+
                                        "<h3 class='<%= k %>'><%= classifications.get(k).get('name') %>"+
                                        "<p><%=classifications.get(k).get('menu_desc')%></p></h3>"+
                                        "<% var model = new MenuClassificationList(v); var view = new MenuClassificationItemView({collection:model, classification:k}); %>"+
                                        "<% print(view.render().el.outerHTML); %>"+
                                "<% }); "+
                            "%>"),
    render: function(){
        //console.log(this.options.classifications);
        //console.log(this.collection.attributes);
        //alert(1);
        this.$el.html(this.template());
        return this;

    }

});

如何合并比较器？

谢谢

我

Answer 1

一种方法可能是为分类定义一个集合，就像为您提到的其他项目定义它们一样:

var Classifications = Backbone.Collections.extend({ // etc. etc.

这样您就可以添加比较器，并且它将始终进行排序。

另一种方法是在 View 中的 initialize 函数中对数组进行排序 ( http://underscorejs.org/#sortBy ):

initialize: function(options) { // sorry don't remember the exact syntax for the parameters passed in, but I believe options is what you need
    this.options.sortedclassifications = _sortBy(options.classifications, function (c) { return parseInt(c.id); }); // or any other sorting logic
} 

然后在模板中使用排序后的分类:

template: _.template( "<% var classifications = this.options.sortedclassifications; _.each(this.collection.attributes, function(v,k) { %>" + // etc. etc.

这应该可以满足您的需要。但是，如果我可以添加个人意见，我将努力为分类定义一个集合并为单个分类定义一个模型。此外，我将保留 MenuClassificationListView 但也会创建一个 MenuClassificationView 来保存单个分类模板。

通过这种方式，您可以组合 View 、更改单个分类的呈现而不更改列表并将事件范围限制到内部 View (因此单击单个分类由单个分类 View 处理)。在我看来，它使一切变得更干净、更可组合和可读。