Backbone.js無法正確呈現視圖

Question

我是ruby on rails和backbone的新手。 我有一個骨干和紅寶石的現有代碼，工作正常，創建一些板，一個板有很多列表，等等。 如果需要，我也會為那個提供代碼。 現在我要添加一些類別的功能，例如用戶可以創建和刪除類別，每個類別都有很多板。 以下數據顯示在數據庫的瀏覽器上，這是正確的。 我沒有正確理解為什么沒有在瀏覽器上顯示正確的視圖。

以下是代碼。 請建議我進行一些代碼更改，以便它可以正常工作。 真的很感激。 提前致謝。

/app/assets/javascripts/collections/categories.js

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

應用程序/資產/ Java腳本/模型/ 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" } }] }); 

應用程序/資產/ Java腳本/視圖/分類/ 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(); } }); } }); 

應用程序/資產/ Java腳本/路由器/ 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); } }); 

應用程序/資產/ JavaScript的/ 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... ! 

應用程序/資產/模板/分類/ 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> 

/應用程序/控制器/ 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

應用程序/模型

class Category < ActiveRecord::Base
    attr_accessible :title, :description
    has_many :boards, dependent: :destroy
end

應用程序/視圖/類別/ index.rabl

collection @categories
attributes :id, :title, :description

配置/ 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

Answer 1

您正嘗試在CategoriesIndex文件中初始化“集合”而不是“模型”：

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

從您的Route文件中調用，使用集合調用構造函數。

index: function () {
var that = this;

var categoriesIndex = new Kanban.Views.CategoriesIndex({
  collection: Kanban.categories,

});

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

所以，請參閱您的kanban.js文件

它應該是：

Kanban.categories = new Kanban.Collections.Categories();
Kanban.categories.fetch({