通过 API 创建新对象时渲染部分

Question

我想使用通过 API 创建的数据来呈现部分内容：

1 - 一个 POST 被发送到 API

2 - API 在数据库中创建对象

3 - 使用对象数据将部分呈现给特定用户

我尝试使用 Action Cable，但是当我通过 Rails 控制台创建调用时，浏览器中没有任何反应。

查看我的代码

models/call.rb

class Call < ApplicationRecord
    after_create_commit { CallBroadcastJob.perform_later self }
end

控制器/seller_controller.rb

class SellerController < ApplicationController
  def index
    @calls = Call.where(status: true).last
  end
end

jobs/call_broadcast.rb

class CallBroadcastJob < ApplicationJob
  queue_as :default

  def perform(call)
    ActionCable.server.broadcast 'new_call_channel', call: render_call(call)
  end

  private
  def render_call(call)
    ApplicationController.render(partial: 'seller/call', locals: {call: call})
  end
end

channels/new_call_channel.rb

class NewCallChannel < ApplicationCable::Channel
  def subscribed
    stream_from "new_call_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

javascrips/channels/new_call.coffee

App.new_call = App.cable.subscriptions.create "NewCallChannel",
  connected: ->
    # Called when the subscription is ready for use on the server

  disconnected: ->
    # Called when the subscription has been terminated by the server

  received: (data) ->
    $('#call_partial').html data

views/seller/index.html.erb

<div class="vendas">
    <div class="w-container">
        <div id="call_partial" class="atendimento lead"><%= render partial: 'seller/call', locals: {call: @calls} if @calls.present? %></div>
    </div>
</div>

views/seller/_call.html.erb

<div class="chamada-row w-row">
    <div class="w-col w-col-3">
        <div>Telefone: <strong><%= call.from_number %></strong></div>
        <div>Campanha: <strong>---</strong></div>
        <div>Agente: <strong><%= call.agent %></strong></div>
    </div>
</div>

RAILS 控制台

2.4.2 :001 > Call.create!(call_id: "321", from_number: "(21) 9999-9999", agent: 001)
   (0.3ms)  BEGIN
  SQL (0.6ms)  INSERT INTO "calls" ("call_id", "from_number", "agent", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["call_id", "321"], ["from_number", "(21) 9999-9999"], ["agent", "1"], ["created_at", "2018-04-18 21:12:18.010119"], ["updated_at", "2018-04-18 21:12:18.010119"]]
   (13.2ms)  COMMIT
Enqueued CallBroadcastJob (Job ID: 9049b86f-1a91-4e3a-a46a-e3ba55ccb6b8) to Async(default) with arguments: #<GlobalID:0x00007f622c37fa38 @uri=#<URI::GID gid://inteligente/Call/10>>
 => #<Call id: 10, call_id: "321", from_number: "(21) 9999-9999", agent: "1", created_at: "2018-04-18 21:12:18", updated_at: "2018-04-18 21:12:18", status: true> 
2.4.2 :002 >   Call Load (0.5ms)  SELECT  "calls".* FROM "calls" WHERE "calls"."id" = $1 LIMIT $2  [["id", 10], ["LIMIT", 1]]
Performing CallBroadcastJob from Async(default) with arguments: #<GlobalID:0x00007f622c1f4240 @uri=#<URI::GID gid://inteligente/Call/10>>
  Rendered seller/_call.html.erb (2.5ms)
[ActionCable] Broadcasting to new_call_channel: {:call=>"<div class=\"chamada-row w-row\">\n\t<div class=\"w-col w-col-3\">\n\t\t<div>Telefone: <strong>(21) 9999-9999</strong></div>\n\t\t<div>Campanha: <strong>---</strong></div>\n\t\t<div>Agente: <strong>001</strong></div>\n\t</div>\n"}
Performed CallBroadcastJob from Async(default) in 115.72ms

Answer 1

在您的控制器中，您可以只将视图部分渲染回来，例如：

render layout: false, template: "path/to/view/partial", locals: {var_used_in_partial: response_data, some_other_var: other_var_value, some_arbitrary_string: "hello world"}

因此，如果您对该 API 端点进行了 ajax 调用，并希望返回一个包含所有数据的模板的响应，那么您可以这样做。然后，您只需将该 response 附加到 DOM 中您想要的任何位置。

我是否正确理解了您的问题？