Backbone.js无法正确渲染视图。

Question

我是一个新手，对于Ruby on Rails和Backbone都不太熟悉。我有一个现有的Backbone和Ruby代码，它可以正常工作，创建了一些看板，每个看板有很多列表等等。如果需要，我也可以提供相关代码。现在，我要添加一些分类功能，比如用户可以创建和删除分类，每个分类有很多看板。从数据库中显示的数据在浏览器上是正确的，但我不明白为什么视图不能正确地显示在浏览器上。以下是代码，请给我一些建议，以便让它正常工作。非常感谢您的帮助。谢谢！

/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 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();
      }
    });
  }

});

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 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);
  }

});

app/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

应用程序/模型

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

- NN796

Answer 1

在你的 CategoriesIndex 文件中，你正在尝试初始化一个“集合”而不是一个“模型”：

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

这是从您的路由文件调用构造函数并使用集合进行调用的。

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({

- Mashhood