javascript - Backbone group results under figure_cat heading -

I present output results in a list, but I would like to change it and results_cat will show results under the headings of the grouping.

I know the spinal cord uses underscores and I like the function by such a group, but I can not know where it should go.

My code is:

window.WineListView = Backbone.View.extend ({initialize: function () {this.render ();}, Event: {" Change #filter_options ":" filterList "}, render: function () {var wines = this.model.models; var len = wines.length; var startPos = (this.options.page - 1) * 8; var endos = Math.Man (Start PO + 8, Lane); // $ ('(Air and Air links, this.L) .append (' & lt; li class = "add-menus"> figures gt; & lt; a href = "# points / add" class = "upvote track" data-action = "Exit protocol" data-from = "repip" data-method = "post" data-remote = "true" rel = "nofollow"> gt; & lt; span class = "glyphicon glyphicon-plus" & gt; Lt; / span & gt; & lt; / a & gt; & lt; div & gt; div class = "table-filter" & gt; select ID = "filter_package" class = "form-control" & Lt; & lt; & gt; Options & gt; 1 & lt; / Option & gt; & Lt; Options & gt; 2 & lt; / Option & gt; & Lt; Options & gt; 3 & lt; / Options & gt; & Lt; Options & gt; 4 & lt; / Options & gt; & Lt; Options & gt; 5 & ​​lt; / Options & gt; & Lt; / Select & gt; & Lt; Input type = "text" data-provide = "typewrite" autocomplete = "off" & gt; & Gt; / Div & gt; & Lt; Table class = "table table-stripe" data-effect = "feed" id = "result" & gt; & Lt; Thead & gt; & Lt; TR & gt; Options & lt; / Th & gt; & Lt; / TR & gt; & Lt; / Thead and gt; & Lt; Th & gt; Figure name & lt; / Th & gt; & Lt; Th & gt; Series & lt; / Th & gt; & Lt; Th & gt; / Table & gt; '); (Var i = startPos; i & lt; endPos; i ++) {$ ('Table', this.el) .append (New WineListItemView ({Model: Wine [i}}). L); } $ (This.el) .append (new pageview ({Model: this.model, page: this.options.page}) .Render () .l); This return; },}); Window.wineListItemView = backbone.View.extend ({tagname: "tr", className: "span3", initialize: function () {this.model.bind ("change", this.render, this); this.model dam ("Destroyed", this closed, it);}, render: function () {$ (this.el). Html (this.template (this.model.toJSON ()); this return;}});

My model:

  window.Wine = Backbone.Model.extend ({urlRoot: "https://api.backendless.com/v1/ Data / statistics ", idAttribute:" objectId ", start: function () {this.validators = {}; this.validators.figure_name = function (value) {return value.length & gt; 0 {if: true}: {IsValid: Incorrect message: "You must enter a name"}}} / * this.validators.grapes = function (value) {return value.length & gt ;?} {IsValid: true}: {isValid: false The message is: "You have to enter a grape variety"}}}; * / this.validators.figure_cat = function (value) {return value.length> gt;} isalalid: true}: {isValid: false , Message: "You must enter a class}}}}}, valid IT M: function (key) {return (it's vigator [key])? It. Vaguator [key] (this. Jet (key)): {isValid: true};}, // TODO: standard of backbone instead Valid: All: Function () {var Message = {}; FoR (Variable Keys in.) {If (this.validators.hasOwnProperty (key)) {var check = this.validators [ Key] (this.get (key)); If (check.isValid === incorrect) {messages [key] = check.message; }}} Back _.size (message) & gt; 0? {IsValid: wrong, message: message}: {isValid: true}; }, Default: {stat_name: "", figure_cat: "", figure_image: "", figure_info: "", figure_accessories: "", figure_set_number: "", figure_baseplate: ""}}}); Window.WineCollection = Backbone.Collection.extend ({Model: Wine, Pars: Function (Feedback) {Return Feedback Data;}, URL: "https://api.backendless.com/v1/data/figures"}) ;  

Any help would be appreciated :)