rails 将重复的 js.erb 代码包装到函数中

Question

我有一个带有自定义推送聊天的 rails 应用程序，聊天消息将由 AJAX 为发送者加载，通过推送器套接字为接收者加载。

在我的 create.js.erb 文件中，目前我有重复的代码，我不知道在 js.erb 模板中包装一段代码的最佳方法是什么。

sby能告诉我，如何正确去除重复项吗？广播函数之前的代码与包装到广播函数中的代码相同。

create.js.erb

//first part is AJAX, only goes to sender
var id = "<%= @conversation.id %>";
var chatbox = $(".chatboxcontent");
var sender_id = "<%= @message.user.id %>";
var receiver_id = $('meta[name=user-id]').attr("content");

if (event.handled !== true) {

   $message = $('<%= j render @message %>');
   chatbox.append($message);
   chatbox.scrollTop(chatbox[0].scrollHeight);

   $(".chatboxtextarea").val("");
   $(".chatboxtextarea").focus();
   $(".chatboxtextarea").css('height', '44px');
   var timeField = ($message).find('.timefield');
   var nameField = ($message).find('#chatname');
   var createdAt = timeField.attr('datetime');
   var momentCreatedAt = moment(createdAt).format('hh:mm A');
   timeField.remove();
   $( "<span class='newtime'>" + " • " + momentCreatedAt + "</span>" ).insertAfter(nameField);

   if(sender_id != receiver_id) {
     chatbox.children().last().removeClass("self").addClass("other");
     chatbox.scrollTop(chatbox[0].scrollHeight);
   }
   event.handled = true;
}

//only broadcasted to receiver, sender is getting the message via the prev AJAX
<% broadcast_to_conversation(@conversation.id, @receiver_id) do %>
  var id = "<%= @conversation.id %>";
  var chatbox = $(".chatboxcontent");
  var sender_id = "<%= @message.user.id %>";
  var receiver_id = $('meta[name=user-id]').attr("content");

  if (event.handled !== true) {

    $message = $('<%= j render @message %>');
    chatbox.append($message);
    chatbox.scrollTop(chatbox[0].scrollHeight);

    $(".chatboxtextarea").val("");
    $(".chatboxtextarea").focus();
    $(".chatboxtextarea").css('height', '44px');
    var timeField = ($message).find('.timefield');
    var nameField = ($message).find('#chatname');
    var createdAt = timeField.attr('datetime');
    var momentCreatedAt = moment(createdAt).format('hh:mm A');
    timeField.remove();
    $( "<span class='newtime'>" + " • " + momentCreatedAt + "</span>" ).insertAfter(nameField);

    if(sender_id != receiver_id) {
        chatbox.children().last().removeClass("self").addClass("other");
        chatbox.scrollTop(chatbox[0].scrollHeight);
    }

    event.handled = true;
  }
<% end %>

Answer 1

1.解决方案

您可以创建一个部分并渲染它两次：

_chatbox.js.erb

var id = "<%= @conversation.id %>";
var sender_id = "<%= @message.user.id %>";
var receiver_id = $('meta[name=user-id]').attr("content");
var chatbox = $(".chatboxcontent");

if (event.handled !== true) {

  $message = $('<%= j render @message %>');
  chatbox.append($message);
  chatbox.scrollTop(chatbox[0].scrollHeight);

  $(".chatboxtextarea").val("");
  $(".chatboxtextarea").focus();
  $(".chatboxtextarea").css('height', '44px');
  var timeField = ($message).find('.timefield');
  var nameField = ($message).find('#chatname');
  var createdAt = timeField.attr('datetime');
  var momentCreatedAt = moment(createdAt).format('hh:mm A');
  timeField.remove();
  $( "<span class='newtime'>" + " • " + momentCreatedAt + "</span>" ).insertAfter(nameField);

  if(sender_id != receiver_id) {
    chatbox.children().last().removeClass("self").addClass("other");
    chatbox.scrollTop(chatbox[0].scrollHeight);
  }
  event.handled = true;
}

create.js.erb

<%= render "chatbox" %>

<% broadcast_to_conversation(@conversation.id, @receiver_id) do %>
  <%= render "chatbox" %>
<% end %>

2。解决方案

但更好的解决方案是将通用代码提取到一个 javascript 函数中，并使用从控制器获取的数据对该函数进行参数化。在这种情况下，您可以更好地重用应用程序其他部分的代码。

在你的控制器中：

def create
  #...
  @chatbox_params = {id: @conversation.id, sender_id: @message.user.id}
  #...
end

application.js

function chatbox(params){
  var receiver_id = $('meta[name=user-id]').attr("content");
  var chatbox     = $(".chatboxcontent");

  if (event.handled !== true) {
    chatbox.append(params.message);
    chatbox.scrollTop(chatbox[0].scrollHeight);

    $(".chatboxtextarea").val("");
    $(".chatboxtextarea").focus();
    $(".chatboxtextarea").css('height', '44px');
    var timeField = (params.message).find('.timefield');
    var nameField = (params.message).find('#chatname');
    var createdAt = timeField.attr('datetime');
    var momentCreatedAt = moment(createdAt).format('hh:mm A');
    timeField.remove();
    $( "<span class='newtime'>" + " • " + momentCreatedAt + "</span>" ).insertAfter(nameField);

    if(params.sender_id != receiver_id) {
      chatbox.children().last().removeClass("self").addClass("other");
      chatbox.scrollTop(chatbox[0].scrollHeight);
    }
    event.handled = true;
  }
}

create.js.erb

var chatboxParams     = JSON.parse('<%= @chatbox_params.to_json %>');
chatboxParams.message = $('<%= j render @message %>');

chatbox(chatboxParams);

<% broadcast_to_conversation(@conversation.id, @receiver_id) do %>
  chatbox(chatboxParams);
<% end %>

rails 将重复的 js.erb 代码包装到函数中

rails wrapping duplicate js.erb code into function

javascript

jquery

ruby-on-rails

ajax

unobtrusive-javascript