i new @ ruby on rails , backbone well. have existing code in backbone , ruby working fine creates boards , 1 board have many lists , on. provide code 1 if needed. going add feature of categories user can create , delete categories , each categories have many boards. following data displayed on browser database correct. not getting why proper views not displaying on browser.
following code. kindly suggest me code changes work. appreciated. in advance.
/app/assets/javascripts/collections/categories.js
kanban.collections.categories = backbone.collection.extend({ model: kanban.models.category, url: "/categories", });app/assets/javascripts/models/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 = this; that.collection.on("all", that.render, that); }, render: function () { var = 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 = this; // 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(); } }); } });app/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 = this; var categoriesindex = new kanban.views.categoriesindex({ collection: kanban.categories }); that.$rootel.html(categoriesindex.render().$el); }, //index: function () { //var = this; //var boardsindex = new kanban.views.boardsindex({ //collection: kanban.boards //}); //that.$rootel.html(boardsindex.render().$el); //}, showcategoryboards: function (id) { var = 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 = this; var board = kanban.boards.get(id); var boardshow = new kanban.views.boardshow({ model: board }); that.$rootel.html(boardshow.render().$el); } });app/assets/javascripts/kanban.js
window.kanban = { models: {}, collections: {}, views: {}, routers: {}, initialize: function() { var = 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 app/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 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" # "logout" => "sessions#destroy" # resources :users, only: [:show] namespace :api resources :users, only: [:show] collection :current end end resources :boards, only: [:index, :show, :create, :update, :destroy] resources :lists , except: [:edit] collection post :sort end end resources :cards, except: [:edit] collection post :sort end end resources :card_comments, only: [:index, :create, :destroy] end end
you're trying initialize "collection" instead of "model" in categoriesindex file:
initialize: function () { var = this; that.collection.on("all", that.render, that); which being called route file calling constructor collection.
index: function () { var = this; var categoriesindex = new kanban.views.categoriesindex({ collection: kanban.categories, }); that.$rootel.html(categoriesindex.render().$el); }, so, see kanban.js file
it should be:
kanban.categories = new kanban.collections.categories(); kanban.categories.fetch({ 
Comments
Post a Comment