How to add navigation to backgridjs elements?

18 Views Asked by At

I'm pretty new to backbone and backgrid and wonder how to add an anchor for navigation to a backgrid grid? So far I create a number of grids and store their meta information in a navigational collection. The navigation and grid elements are rendered, but I fail to see how to connect the navigation anchor to anything of the grid table.

Sample code, where I use grid.render().cid, which does not work:

  races = { };  
  docs.forEach(function(doc) {
    if (races[doc.s_y] === undefined) {
      races[doc.s_y] = {};
    }
    if (races[doc.s_y][doc.t] === undefined) {
      races[doc.s_y][doc.t] = new Races();
      races[doc.s_y][doc.t].add(doc);
    } else {
      races[doc.s_y][doc.t].add(doc);
    }

  });
  console.log("Found number of docs", docs.length);

  var NavigationCollection = Backbone.Collection.extend({
    model : Race
  });
  var navCollection = new NavigationCollection();
  var NavView = Backbone.View.extend({  
    el : $('ul'), 

    initialize: function(){
      _.bindAll(this, 'render'); 
      // this.render();  
    },  

    render : function() {
      this.collection.each(function (race) {
        this.$el.append("<li><a href=#" + race.get("link") + ">" + race.get("track") + " " + race.get("year") + "</a></li>");
      }, this);
      return this; // remember this for chaining
    }

  });

  var grids = {};
  for (var key in races) {
    if (races.hasOwnProperty(key)) {
      for (var track in races[key]) {
        var grid = new Backgrid.Grid({
          columns: columns,
          collection: races[key][track],
          emptyText: "No Data, Loading"
        });
        if (grids[key] === undefined) {
          grids[key] = {};
        }
        grids[key][track] = grid;
        console.log(key + " -> " + races[key][track]);
        grid.render().sort("p", "ascending");
        console.log(grid.render());
        navCollection.add({ year: key, track: track, link: grid.render().cid });
        $("#race-results").append(grid.render().el);
      }
    }
  }
  var navView = new NavView({
    collection: navCollection
  });
  $("#navigation").append(navView.render().el);
1

There are 1 best solutions below

0
TeTeT On

Just discovered that the 'id' can be defined in the grid definition. I use 'track' there and save that as 'link' in the navigation element. Maybe there are better ways to achieve this?