Rails 6拖放(可排序)

时间:2020-06-02 07:49:52

标签: javascript ruby-on-rails ruby ruby-on-rails-6

我在rails 6中对HTML可排序更新进行更新时遇到问题。我通过网页拖放了一些图片组合,效果很好,但是当我想用更新的位置更新网页时,我得到了 NoMethodError(未定义) nil:NilClass的方法“ each”):

我将此脚本用于HTML Sortable

https://github.com/jordanhudgens/devcamp-portfolio/blob/master/app/assets/javascripts/html.sortable.js

portfolio_controller:

class PortfoliosController < ApplicationController
    before_action :set_portfolio_item, only: [:edit, :show,:update, :destroy]
    layout "portfolio"
    access all: [:show, :index, :angular], user: {except: [:destroy, :new, :create, :update, :edit]}, site_admin: :all

    def index
        @portfolio_items = Portfolio.by_position
    end

    def sort
        params[:order].each do |key, value|
          Portfolio.find(value[:id]).update(position: value[:position])
        end

        head :ok
    end

    def angular
        @angular_portfolio_items = Portfolio.angular        
    end

    def new
        @portfolio_item = Portfolio.new     
        3.times { @portfolio_item.technologies.build }
    end

    def create
        @portfolio_item = Portfolio.new(portfolio_params)
            respond_to do |format|
            if @portfolio_item.save
              format.html { redirect_to portfolios_path, notice: 'Your Portfolio item is now live.' }
            else
              format.html { render :new }
            end
        end
    end

    def edit
    end

    def update
        respond_to do |format|
            if @portfolio_item.update(portfolio_params)
                format.html { redirect_to portfolios_path, notice: 'The Record successfully updated.' }
            else
                format.html { render :edit }
            end
        end
    end

    def show
    end

    def destroy
        #Destroy/delete the record
        @portfolio_item.destroy

        #Redirect
        respond_to do |format|
          format.html { redirect_to portfolios_url, notice: 'Record was removed' }
        end
    end

    private

    def set_portfolio_item
        @portfolio_item = Portfolio.find(params[:id])
    end

    def portfolio_params
        params.require(:portfolio).permit(:title, 
                                          :subtitle, 
                                          :body, 
                                          technologies_attributes: [:name]
                                        )
    end
end

routes.rb:

Rails.application.routes.draw do
  devise_for :users, path: '', path_names: { sign_in: 'login', sign_out: 'logout', sign_up: 'register'}
  resources :portfolios, except: [:show] do
    put :sort, on: :collection
  end
  get 'angular-items', to: 'portfolios#angular'
  get 'portfolio/:id', to: 'portfolios#show', as: 'portfolio_show'

  get 'about-me', to: 'pages#about'
  get 'contact', to: 'pages#contact'
  resources :blogs do
     member do
        get :toggle_status
     end
  end

  root to: 'pages#home'
end

这是我的Portfolio.js:

var ready, set_position;

ready = void 0;

set_position = void 0;

set_position = function() {
  $(".card").each(function(i) {
    $(this).attr('data-pos', i + 1);
  });
};

ready = function() {
  set_position();
  $('#sortable').sortable();
  $('#sortable').sortable().bind('sortupdate', function(e, ui) {
    var updated_order;
    updated_order = [];
    set_position();
    $(".card").each(function(i) {
      updated_order.push;
      ({
        id: $(this).data('id'),
        position: i + 1
      });
    });
    $.ajax({
      type: 'PUT',
      url: '/portfolios/sort',
      data: {
        order: updated_order
      }
    });
  });
};

$(document).ready(ready);

_portfolio_item.html.erb:

<div class="card" data-id="<%= portfolio_item.id %>">
    <%= image_tag portfolio_item.thumb_image unless portfolio_item.thumb_image.nil? %>
    <p class="card-text">
        <span>
            <%= link_to portfolio_item.title, portfolio_show_path(portfolio_item) %>
        </span>
        <%= portfolio_item.subtitle %>
    </p>
</div>

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

我看到的每个语句的唯一位置是PortfoliosController的sort方法。

params[:order].each

您需要设置params [:order]或通过检查是否已设置来防止发生此错误。您可以使用保存导航运算符:

params[:order]&.each

还是可以检查order参数是否设置为现在?方法。

if params[:order].present?
  params[:order]&.each
相关问题