使用来自动作电缆的数据渲染 Rails 部分

Ian*_*ran 3 ruby-on-rails actioncable

我尝试使用动作电缆构建聊天页面。我成功地获得了新的消息数据,如

App.room = App.cable.subscriptions.create({
  channel:  "API::V1::TransactionMessageChannel",
  transaction_id: gon.transaction_id
}, {
  connected: function() {},
  disconnected: function() {},
  received: function(data) {
    alert(data["user"]["full_name"]);
  },
  appendLine: function(data) {
    var html = createLine(data)
    $(".chat-area ul").append(html)
  },
  createLine: function(data) {
  }
});
Run Code Online (Sandbox Code Playgroud)

在这里,我将数据作为 JavaScript 对象。我需要渲染一个 rails 部分(里面有很多 ruby​​ 逻辑)

- if @current_user['id'] == data['user']['id']
  li.left.clearfix.admin-chat
    span.chat-img1.pull-right
      img.img-circle alt=data['user']['full_name'] src=display_avatar(data['user']['avatar_url'])
    .chat-content.me.clearfix
      - case data['transaction_message']['activity']
      - when 'attach_image'
        p
          a.img data-fancybox="gallery" href=data['transaction_message']['message']
            img src=data['transaction_message']['message'] style="height:130px;"
      - when 'attach_file'
            p
              a target="_blank" href=data['transaction_message']['message']
                i.fa.fa-file-text-o
                '
                = data['transaction_message']['message'].split('/').last
      - else
        p = data['transaction_message']['message']
        .chat-time.pull-left
          = timeago_tag Time.at(data['transaction_message']['created_at']), lang: I18n.locale
Run Code Online (Sandbox Code Playgroud)

但是我不能将 JS 数据对象作为本地人传递来呈现这个部分。我虽然有 2 个选项,发送 ajax 请求以将数据发送到服务器或在 javascript 中创建一个新的 html 模板(具有许多逻辑)。两者看起来都很复杂。任何人都可以提出更好的方法吗?

gol*_*das 10

您可以在 json 响应的两个单独属性中发送 html 模板和 js 变量:

class ChatChannel < ApplicationCable::Channel
  def speak(data)
    ActionCable.server.broadcast('messages',
      html: html(data),
      variables: { foo: :bar }
    )
  end

  def html(message)
    ApplicationController.render(
      partial: 'messages/message',
      locals: { message: message }
    )
  end
end
Run Code Online (Sandbox Code Playgroud)