我无法让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;

    }

});


如何合并比较器?

谢谢,

ty

最佳答案

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

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


这样,您可以添加比较器,并且将始终对其进行排序。

另一种方法是在视图中的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: _.template( "<% var classifications = this.options.sortedclassifications; _.each(this.collection.attributes, function(v,k) { %>" + // etc. etc.


这应该给您您所需要的。但是,如果我要发表个人意见,我将努力为分类定义一个Collection并为单个分类定义一个模型。此外,我将保留MenuClassificationListView,但还会创建一个将保存单个分类模板的MenuClassificationView

通过这种方式,您可以组成视图,更改单个分类的呈现方式而无需更改列表并将事件的范围限定到内部视图(因此单击单个分类将由单个分类视图处理)。我认为,它使一切变得更清洁,更易组合和可读。

10-07 19:48
查看更多