Question

我在这里使用本教程将dropzonejs集成到我的rails应用程序中：http://geekhmer.github.io/blog/2015/02/10/ruby-on-rails-uploads-multiple-files-with-dropzonejs-and-paperclip-gem/

它按原样工作，如果我从另一个控制器（汽车）引用它，它按原样工作。问题是我希望它只显示与当前汽车的汽车ID相匹配的图像。我有car.id所有设置匹配图像表的car_id字段，从dropzonejs字段上传将其添加到数据库并且工作正常，但当我尝试过滤部分时，我无法做到添加新图像时刷新它。

我有两个控制器我正在测试它。图像：

    class ImagesController < ApplicationController

  def index
    @images = Image.all
  end

  def create
    @image = Image.new(image_params)

    if @image.save
      render json: { message: "success", fileID: @image.id }, :status => 200
    else
      render json: { error: @image.errors.full_messages.join(',')}, :status => 400
    end     
  end

private

  def image_params
    params.require(:image).permit(:avatar, :car_id)
  end

end

汽车控制器是：

 class CarsController < ApplicationController
  before_action :set_car, only: [:show, :edit, :update, :destroy]
  before_filter :load_images

  # GET /cars
  # GET /cars.json
  def index
    @cars = Car.all
  end

  # GET /cars/1
  # GET /cars/1.json
  def show
  end

  # GET /cars/new
  def new
    @car = Car.new
  end

  # GET /cars/1/edit
  def edit
  end

  # POST /cars
  # POST /cars.json
  def create
    @car = Car.new(car_params)

    respond_to do |format|
      if @car.save
        format.html { redirect_to @car, notice: 'Car was successfully created.' }
        format.json { render :show, status: :created, location: @car }
      else
        format.html { render :new }
        format.json { render json: @car.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /cars/1
  # PATCH/PUT /cars/1.json
  def update
    respond_to do |format|
      if @car.update(car_params)
        format.html { redirect_to @car, notice: 'Car was successfully updated.' }
        format.json { render :show, status: :ok, location: @car }
      else
        format.html { render :edit }
        format.json { render json: @car.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /cars/1
  # DELETE /cars/1.json
  def destroy
    @car.destroy
    respond_to do |format|
      format.html { redirect_to cars_url, notice: 'Car was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_car
      @car = Car.find(params[:id])
    end

    def load_images
      @images = Image.all
      @image = Image.new 
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def car_params
      params.require(:car).permit(:name, :model, :carpic)
    end
end

以下是我使用cars / show.html.erb

显示的视图

  <p id="notice"><%= notice %></p>

    <p>
      <strong>Name:</strong>
      <%= @car.name %>
    </p>

    <p>
      <strong>Model:</strong>
      <%= @car.model %>
    </p>

    <p>
      <strong>Carpic:</strong>
     <%= image_tag @car.carpic(:medium)%>
    </p>
    <h1>My Images</h1>
    <%= form_for(Image.new, html: { multipart: true, class: "dropzone"}) do |f|  %>
    <%= f.hidden_field :car_id, :value => @car.id %>
      <div class="fallback">
        <%= f.file_field :avatar %><br>
        <%= f.submit "Upload my Avatar" %>
      </div>
    <% end %>

    <div class="index">
      <%= render partial: 'images/index' %>
    </div>

    <%= link_to 'Edit', edit_car_path(@car) %> |
    <%= link_to 'Back', cars_path %>

Here is the partial images/_index.html.erb
<% @images.each do |image| %>
        <div class="img-thumbnail"><%= image_tag image.avatar.url(:thumb), alt: image.avatar.url(:thumb) %></div>
<% end %>

这是app / assets / javascripts / image.js

$(document).ready(function(){
  // disable auto discover
  Dropzone.autoDiscover = false;

  var dropzone = new Dropzone (".dropzone", {
    maxFilesize: 256, // set the maximum file size to 256 MB
    paramName: "image[avatar]", // Rails expects the file upload to be something like model[field_name]
    addRemoveLinks: false // don't show remove links on dropzone itself.
  });

  dropzone.on("success", function(file) {
    this.removeFile(file);
    $.getScript("/images");
  })
});

这里是views / images / index.js.erb

$(".index").html("<%= escape_javascript(render('index')) %>")

如果我不尝试过滤部分中的@images结果，只显示image.car_id，这又有效。它会显示它们但是当dropzonejs上传文件时它不会刷新，就像没有过滤器一样。

我在部分_index

中尝试了这个

<% Image.where(car_id: @car.id).find_each do |image| %>
    <div class="img-thumbnail">
      <%= image_tag image.avatar.url(:thumb), alt: image.avatar.url(:thumb) %>
    </div>
  <% end %>

同样，这可行，但它不会像没有被过滤那样刷新。我在控制器中玩过，但也没有成功。

另外，我的关系设置正确，图像属于汽车，汽车有很多图像。

非常感谢任何帮助！一起尝试了一个星期！

编辑添加以下

所以我已经能够使用GON gem，但有一个新问题，这是我的代码：

Show Controller，我已添加：

def show
    gon.watch.carid = @car.id
  end

在application.html.erb的包含顶部我添加了：

 <%= include_gon(:watch => true, :init => true) %>

我的Image.js文件现在看起来像这样：

$(document).ready(function(){

//禁用自动发现 Dropzone.autoDiscover = false;

  var dropzone = new Dropzone (".dropzone", {
    maxFilesize: 256, // set the maximum file size to 256 MB
    paramName: "image[avatar]", // Rails expects the file upload to be something like model[field_name]
    addRemoveLinks: false // don't show remove links on dropzone itself.
  });

  dropzone.on("success", function(file) {
    this.removeFile(file);
    $.getScript(gon.watch.carid);
  })
});

所以，如果我要将图像添加到car.id＆＃34; 1＆＃34;这就是新问题。然后返回汽车索引并点击car.id＆＃34; 2＆＃34;的显示链接。当我通过放置区添加新图像时，来自car.id＆＃34; 2＆＃34;切换到car.id＆＃34; 1＆＃34;直到我点击页面上的刷新，它然后重置gon.watch.carid中的变量。

我认为，显然错误的是调用show方法显示第二辆汽车应该重置那个gon变量？如果不是我认为应该在application.html.erb文件中执行gon watch和init调用。

有没有人和Gon一起工作或者想过如何解决这个问题？

Answer 1

我能够通过将gon include语句从头部移动到application.html.erb文件的主体来解决这个问题，现在一切都很好！

希望这有助于其他人！

d

Gon插件没有刷新 - 使用查找

1 个答案: