Backbone.js does not render views correctly
I am new to ruby on rails and spine. I have existing code in trunk and ruby that works great, which creates some boards, and one board has many lists, and so on. I will also provide the code for this. Now I'm going to add some category function, for example, user can create and delete categories and there are many boards in each category. The following data is displayed in the browser from a database that is correct. I don't understand why the corresponding views are not showing in the browser.
Below is the code. Please suggest me some code changes to make them work. It will be really appreciated. Thanks in advance.
/app/assets/javascripts/collections/categories.js
Kanban.Collections.Categories = Backbone.Collection.extend({
model: Kanban.Models.Category,
url: "/categories",
});
app / assets / javascripts / model / category.js
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"
}
}]
});
app / assets / javascripts / views / categories / categories_index.js
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();
}
});
}
});
Application / Assets / JavaScripts / Routers / main_routers.js
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);
}
});
Application / Assets / JavaScripts / kanban.js
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... !
app / assets / templates / categories / index.jst.ejs
<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>
/ app / controllers / categories_controller
class CategoriesController < ApplicationController
# before_action :set_category, only: [:show, :edit, :update, :destroy]
respond_to :json
def index
@categories = Category.all
# respond_with(@categories)
# @categories = current_user.categories.includes(:boards)
end
def show
respond_with(@category)
end
def new
@category = Category.new
respond_with(@category)
end
def edit
end
def create
category = Category.new(params[:category])
if category.save
# board.members << current_user
render json: category, status: :ok
else
render json: category.errors, status: :unprocessable_entity
end
end
def update
@category.update(category_params)
respond_with(@category)
end
def destroy
@category.destroy
respond_with(@category)
end
private
def set_category
@category = Category.find(params[:id])
end
def category_params
params.require(:category).permit(:title, :description)
end
end
application / models
class Category < ActiveRecord::Base
attr_accessible :title, :description
has_many :boards, dependent: :destroy
end
app / views / categories / index.rabl
collection @categories
attributes :id, :title, :description
config / routes.rb
Kanban::Application.routes.draw do
devise_for :users
resources :users
# root to: "categories#index"
root to: "root#index"
resource :root, only: [:index]
resources :categories
# resource :session, only: [:new, :create, :destroy]
#get "login" => "sessions#new"
# get "logout" => "sessions#destroy"
# resources :users, only: [:show]
namespace :api do
resources :users, only: [:show] do
collection do
get :current
end
end
resources :boards, only: [:index, :show, :create, :update, :destroy]
resources :lists , except: [:edit] do
collection do
post :sort
end
end
resources :cards, except: [:edit] do
collection do
post :sort
end
end
resources :card_comments, only: [:index, :create, :destroy]
end
end
+3
source to share
1 answer
you are trying to initialize "collection" instead of "model" in your CategoriesIndex file :
initialize: function () {
var that = this;
that.collection.on("all", that.render, that);
which is called from your route file call constructor using the collection .
index: function () {
var that = this;
var categoriesIndex = new Kanban.Views.CategoriesIndex({
collection: Kanban.categories,
});
that.$rootEl.html(categoriesIndex.render().$el);
},
so see the kanban.js file
it should be:
Kanban.categories = new Kanban.Collections.Categories();
Kanban.categories.fetch({
+1
source to share