Question

我几天都遇到了这个问题，而且我找不到任何可以帮助我的事情。

我们的想法是在模态弹出窗口中获取price_scenarios索引视图。对于表中显示的每个price_scenario，一个控制器方法，＆＃34; price＆＃34;叫做。此方法从模型中获取一些信息，并使用JSON将其格式化。这种获取价格的方式是针对不再在项目中的先前开发人员编码的，并且由于价格值可能需要一段时间才能计算，因此在页面加载时会呈现小轮gif。

问题：price_scenarios＆＃34;价格＆＃34;方法不会呈现任何值。只有在＆＃34;价格＆＃34;在模式弹出窗口中呈现的索引视图中调用，我尝试这样做渲染price_scenarios索引，它工作正常。此外，此方法已成功用于应用程序的许多其他视图中。我认为格式响应一定是问题，因为从弹出窗口调用方法，但我尝试过的所有内容都没有改善结果。

产品show.html.haml 一个按钮，将price_scenarios索引显示为模式弹出窗口：

 %h3
   = model_class.human_attribute_name(:price)
   = link_to PriceScenario.model_name.human(count: 2), formula_product_price_scenarios_path(@formula, @product), remote: true, data: {toggle: "modal", target: "#price_scenarios"}, class: "btn"

 #price_scenarios(class="modal hide fade" role="dialog" aria-labelledby="Delta" aria-hidden="true")

price_scenarios_controller.rb 索引和价格方法的定义

class PriceScenariosController < ApplicationController
  before_filter :require_client
  load_and_authorize_resource :formula
  load_and_authorize_resource :product, :through => :formula
  before_filter :get_tuple, only: :price

  def index
    @price_scenarios = @product.price_scenarios
    respond_to :js
  end

  def price
    @price_scenario = PriceScenario.find(params[:id])
    @price = @price_scenario.shifted_price(@tuple)
    @price_units = @product.price_units

    respond_to do |format|
      format.html { render partial: 'price'}
      format.json { render json: {price: @price, units: @price_units}}
    end
  end

price_scenario index.js.haml view 在模式中呈现索引视图：

$("#price_scenarios").html("#{escape_javascript(render partial: 'modal_price_scenarios')}");

在模式中呈现的

_modal_price_scenarios.html.haml 视图，＆＃34;价格＆＃34;在其中被召唤。

#modal_price_scenarios(class="modal" role="dialog" aria-labelledby="Delta" aria-hidden="true")

  - model_class = PriceScenario

  .modal-body
    %table.table.table-striped
      %thead
        %tr
          %th= model_class.model_name.human
          %th= model_class.human_attribute_name(:price)
          %th= model_class.human_attribute_name(:references)
      %tbody
        - @price_scenarios.each do |scenario|
          %tr
            %td= scenario.name
            %td.price{:"data-product-price" => price_formula_product_price_scenario_path(@formula, @product, scenario)}
              = image_tag('ajax-loader.gif')

-Price.html.haml部分由price_scenarios价格方法呈现。

= "#{@price} #{@price_units}"

product_price.js

$(function(){
  $('[data-product-price]').each(function(){
    var url = $(this).data('product-price')
    $.ajax({
      url:      url,
      cache:    false,
      dataType: "json"
    }).done(function( data ) {
        var priceWithUnits = data['price'] + ' ' + data['units']
        $('[data-product-price="' + url + '"]').html(priceWithUnits);
      });
  });
});

浏览器控制台和开发日志不会显示任何错误，但似乎没有正确的请求。通过HttpRequester启动手动请求会产生正确的结果。

显示模态后

浏览器控制台：

GET localhost:3000/es/formulas/84/products/69/price_scenarios [HTTP/1.1 200 OK 1590ms] 
POST http://localhost:3000/mini-profiler-resources/results [HTTP/1.1 200 OK 154ms]

开发日志

Rendered price_scenarios/_modal_price_scenarios.html.haml (1537.1ms)
Rendered price_scenarios/index.js.haml (1542.6ms)

手动请求

GET http://localhost:3000/es/formulas/84/products/69/price_scenarios/20/price?_=1427‌711855278 -- response -- 200 OK 
Content-Type: text/html; charset=utf-8 X-UA-Compatible: IE=Edge Cache-Control: must-revalidate, private, max-age=0 X-Request-Id: af912de9ef3e953387ddbd5f687aa1c2 X-Runtime: 2.647176 X-Miniprofiler-Ids: ["yxomxau7wdgouexw439j"] Content-Length: 18 Server: WEBrick/1.3.1 (Ruby/1.9.3/2014-02-24) Date: Mon, 30 Mar 2015 11:04:41 GMT Connection: Keep-Alive 275.391 EUR / MWh

Answer 1

渲染JSON将内容类型设置为application / json和可选地将JSON包装在回调中。这是预料之中的响应将被解析（或eval'd）以用作数据结构。 http://apidock.com/rails/ActionController/Base/render

但是它实际上并没有将哈希值转换为您需要手动执行的JSON编码字符串：

format.json { render json: {price: @price, units: @price_units}.to_json }

我发现ActiveModel Serializers对于构建JSON响应对象非常有用，如果你做任何复杂的事情，它们很快就会失控。

class PriceSerializer < ActiveModel::Serializer
  has_many :price_units
  attributes :name, :whatever
end

class PriceScenariosController < ApplicationController
  #...
  def price 
    # ...
    format.json { render json: @price }
  end
end

修改如果运行product_price.js时，实际上可能没有将另一个问题添加到DOM中。

// Not guaranteed to have run before product_price.js $("#price_scenarios").html("#{escape_javascript(render partial: 'modal_price_scenarios')}");

可能的解决方案是将部分添加到隐藏元素中，而不是作为javascript字符串或使用<template>元素。

使用JS的控制器方法在模态弹出窗口中调用时不返回/呈现数据

1 个答案: