Backbone.js is not rendering views properly

Kanban.Collections.Categories = Backbone.Collection.extend({
  model: Kanban.Models.Category,
  url: "/categories",
});

Kanban.Models.Category = Backbone.RelationalModel.extend({

  urlRoot: "/categories",

	relations: [{
		type: Backbone.HasMany,
		key: "boards",
		relatedModel: "Kanban.Models.Board",
		collectionType: "Kanban.Collections.Boards",
		reverseRelation: {
			key: "category"
		}
	}]

});

Kanban.Views.CategoriesIndex = Backbone.View.extend({
  template: JST['categories/index'],
  tagName: "section",
  className: "categories-index",

  events: {
    "submit form.create_category": "createCategory"
  },

  initialize: function () {
    var that = this;
    that.collection.on("all", that.render, that);
  },

  render: function () {
    var that = this;

    var renderedContent = that.template({
      categories: that.collection
    });

    that.$el.html(renderedContent);

    console.log("categories ka render");
    return that;
  },

  createCategory: function (event) {
    event.defaultPrevented();
    var that = this;

    // get form attrs, reset form
    var $form = $(event.target);
    var attrs = $form.serializeJSON();
    $form[0].reset();

    var category = new Kanban.Models.Category();

    // fail if no category name
    if (!attrs.category.name) {
      var $createContainer = $("div.create_category");
      var $nameInput = that.$el.find("input.category_name");

      $nameInput.hide();
      $createContainer.effect("shake", {
        distance: 9,
        times: 2,
        complete: function () {
          $nameInput.show();
          $nameInput.focus();
        }
      }, 350);
      return false;
    }

    // save list
    category.save(attrs.category, {
      success: function (data) {
        // category.get("users").add(Kanban.currentUser);
        that.collection.add(category);

        // keep focus on list input
        that.$el.find("input.category_name").focus();
      }
    });
  }

});

Kanban.Routers.Main = Backbone.Router.extend({
  initialize: function (options) {
    this.$rootEl = options.$rootEl;
  },

  routes: {
    "": "index",
    "/login": "login",
    "categories/:id": "showCategoryBoards",
    "boards/:id": "showBoardLists"
    //"boards/:id": "deleteBoard"
  },

  index: function () {
    var that = this;

    var categoriesIndex = new Kanban.Views.CategoriesIndex({
      collection: Kanban.categories
    });
    
    that.$rootEl.html(categoriesIndex.render().$el);
  },



//index: function () {
    //var that = this;

    //var boardsIndex = new Kanban.Views.BoardsIndex({
      //collection: Kanban.boards
    //});
    
    //that.$rootEl.html(boardsIndex.render().$el);
  //},



  showCategoryBoards: function (id) {
    var that = this;

    var category = Kanban.categories.get(id);
    var categoryShow = new Kanban.Views.BoardIndex({
      model: category
    });

    that.$rootEl.html(categoryShow.render().$el);
  },



showBoardLists: function (id) {
    var that = this;

    var board = Kanban.boards.get(id);
    var boardShow = new Kanban.Views.BoardShow({
      model: board
    });

    that.$rootEl.html(boardShow.render().$el);
  }

});

window.Kanban = {
  Models: {},
  Collections: {},
  Views: {},
  Routers: {},
  initialize: function() {
    var that = this;

    that.$rootEl = $("#content");

    Kanban.currentUser = new Kanban.Models.CurrentUser();
    Kanban.currentUser.fetch({
      success: function (response) {
          // console.log("got user");
          
        Kanban.category = new Kanban.Models.Category();
        Kanban.category.fetch({
          success: function (response) {   

            Kanban.boards = new Kanban.Collections.Boards();
            Kanban.boards.fetch({
              success: function (response) {
                // console.log("got boards");
                new Kanban.Routers.Main({ $rootEl: that.$rootEl });
                Backbone.history.start();

               }
             });
          },

          error: function (response) {
            // console.log("please log in");
          }
        });
      }
    });
  }
};

$(document).ready(function(){
  Kanban.initialize();


});


//BOARD DELETION METHOD... !
$(document).on("click", ".delete-icon", function() {
  var board_id = $(this).parent().attr('id');
  $.ajax({
    url: "/api/boards/"+board_id,
    type: 'DELETE',
    success: function(result) {
      $("#"+board_id).remove();
    }
  });
});

//LIST DELETION METHOD... !

$(document).on("click", ".list-delete-icon", function() {
  var listId = $(this).parent().attr('id').replace(/list_/, '');
  // alert(listId);
  //var id = $("div").attr('id').replace(/button/, '');
  $.ajax({
    url: "/api/lists/"+listId,
    type: 'DELETE',
    success: function(result) {
      alert("success!!!");
      $("#list_"+listId).remove();
    }
  });
});

//card DELETION METHOD... !

<header class="categories-index">
  <span class=""></span>
  <h2>My Categories</h2>
</header>
<div>
<ul class="nav pull-left navbar-nav">
  <% categories.each(function (category) { %>
    <li id="<%= category.id %>" class="boxes">
      <a href="/#categories/<%= category.id %>">

        <%= category.escape("title") %>
      </a>
      
      <div class="delete-icon">
        <span class="glyphicon glyphicon-trash">
      </div>

    </li>
  <% }); %>
<li class="boxes">
    <p>Create New Category</p>
    <form class="create_category" id="myform">
      <input type="text" 
             id="customInput"
             class="category_name"
             name="category[title]"
             placeholder="Category Name ..." />
      <input type="text"
             class="category_description"
             name="category[description]"
             placeholder="Category Description ..." />
      <input type="submit" value="Create Category" />
    </form>
</li>
</ul>
</div>