骨干组结果在figure_cat标题下

Question

我目前在列表中输出结果，但想要更改此结果，并在图标标题分组下显示结果。

我知道骨干使用下划线，因此groupby函数是我需要的，但我似乎无法弄清楚应该去哪里。

我的代码是：

window.WineListView = Backbone.View.extend({

initialize: function () {

    this.render();
},

events: {
    "change #filter_options": "filterList"
},

render: function () {
    var wines = this.model.models;
    var len = wines.length;
    var startPos = (this.options.page - 1) * 8;
    var endPos = Math.min(startPos + 8, len);

    //$('.inner-links', this.el).append('<li class="add-menu"><a href="/add">Add Wine</a></li>');


    $(this.el).html('<div class="top-options"><h1 class="page-title">Figures</h1><a href="#figures/add" class="upvote track" data-action="upvote protip" data-from="protip" data-method="post" data-remote="true" rel="nofollow"><span class="glyphicon glyphicon-plus"></span></a></div><div class="table-filter"><select id="filter_options" class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select> <input type="text" data-provide="typeahead" autocomplete="off"></div><table class="table table-striped" data-effect="fade" id="results"><thead><tr><th>Figure Name</th><th>Series</th><th>Options</th></tr></thead></table>');

    for (var i = startPos; i < endPos; i++) {
            $('.table', this.el).append(new WineListItemView({model: wines[i]}).render().el);
    }

    $(this.el).append(new Paginator({model: this.model, page: this.options.page}).render().el);



    return this;

},
});

window.WineListItemView = Backbone.View.extend({

tagName: "tr",

className: "span3",


initialize: function () {
    this.model.bind("change", this.render, this);
    this.model.bind("destroy", this.close, this);
},

render: function () {

    $(this.el).html(this.template(this.model.toJSON()));
    return this;

}});

我的模特：

window.Wine = Backbone.Model.extend({


urlRoot: "https://api.backendless.com/v1/data/figures",
idAttribute: "objectId",


initialize: function () {
    this.validators = {};

    this.validators.figure_name = function (value) {
        return value.length > 0 ? {isValid: true} : {isValid: false, message: "You must enter a name"};
    };

    /*
    this.validators.grapes = function (value) {
        return value.length > 0 ? {isValid: true} : {isValid: false, message: "You must enter a grape variety"};
    };

    */

    this.validators.figure_cat = function (value) {
        return value.length > 0 ? {isValid: true} : {isValid: false, message: "You must enter a category"};
    };

},

validateItem: function (key) {
    return (this.validators[key]) ? this.validators[key](this.get(key)) : {isValid: true};
},

// TODO: Implement Backbone's standard validate() method instead.
validateAll: function () {

    var messages = {};

    for (var key in this.validators) {
        if(this.validators.hasOwnProperty(key)) {
            var check = this.validators[key](this.get(key));
            if (check.isValid === false) {
                messages[key] = check.message;
            }
        }
    }

    return _.size(messages) > 0 ? {isValid: false, messages: messages} : {isValid: true};
},

defaults: {
    figure_name: "",
    figure_cat: "",
    figure_image: "",
    figure_info: "",
    figure_accessories: "",
    figure_set_number: "",
    figure_baseplate: ""
}});
window.WineCollection = Backbone.Collection.extend({

model: Wine,

parse: function(response) {
    return response.data;
},

url: "https://api.backendless.com/v1/data/figures"
});

任何帮助将不胜感激：）