Question

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

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

可以告诉我，如何正确摆脱重复？广播功能之前的代码与包含在广播功能中的代码相同。

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代码包装到函数中

1 个答案: