Javascript + Rails View 渲染混乱答案

【问题标题】：Javascript + Rails View rendering confusionJavascript + Rails View 渲染混乱
【发布时间】：2013-07-28 01:55:37
【问题描述】：

我在我的一个 Rails 视图中使用 firebase 进行聊天，但我无法正确捕获用户输入的值以显示在页面上。当我添加 jquery plugin pageslide. 时发生了这种情况，我必须在我的实现中遗漏了一些东西才能让这两者一起工作。

这里是我的 Rails 视图的显示页面-

<script src="https://cdn.firebase.com/v0/firebase.js"></script>

<div id='chat-window'> 
  <%= render 'chat_window' %>
</div>
<a href="#chatty" class="second">Open Chat</a>

这里是部分聊天窗口-

<% if @list.chat_enabled %>
  <%= render 'chat' %>
<% else %>
  <% if @list.owner?(current_user) %>
    <%= link_to 'Get ' + @list.name + "Chat Ticket",  enable_chat_list_path(@list), :class => 'btn', :remote => true %>
  <% end %>
<% end %>

这里是部分聊天内容-

<div id="chatty" >
  <ol id='messagesDiv' class="conversation">  
  </ol>
  <input id='messageInput' class="conversation" placeholder='Message...'>
  <a href="javascript:$.pageslide.close()"><span class="btn btn-info">Done Chatting</span></a>
</div>

<script>
  $(document).ready(function() {
      $(".second").pageslide({ direction: "left", modal: true });
  });
</script>

这是用于启用和编写基于 firebase 文档的聊天的咖啡脚本文件-

window.enableChat = (baseRef, projRef, userName, token) ->
  # Get a reference to the root of the chat data.
  messagesRef = new Firebase(baseRef)
  projectRef = ''
  messagesRef.auth token, (error, user) ->
    if error
      $("#messageInput").prop('disabled', true)
      $("#messagesDiv").html('disabled')
    else
      projectRef = messagesRef.child(projRef)

      # Add a callback that is triggered for each chat message.
      projectRef.on "child_added", (snapshot) ->
        message = snapshot.val()
        $("<li class='self'>").append($("<div class='message'>").append($("<p>").text(message.text))).prepend($("<span class='userVal'/>").text(message.name + ": ")).appendTo $("#messagesDiv")

      # When the user presses enter on the message input, write the message to firebase.
      $("#messageInput").keypress (e) ->
        if e.keyCode is 13
          text = $("#messageInput").val()
          projectRef.push 
            name: userName
            text: text
          $("#messageInput").val ""

更多信息如果我在不激活页面幻灯片的情况下使用聊天，聊天会写入显示页面就好了。

一旦我激活页面幻灯片并使用文本框，一个新的 li 将被附加到主显示页面的列表中，但其中没有任何值。并且没有附加到页面幻灯片内的列表。

这个链接<a href="#chatty" class="second123">Open Chat</a>是用来打开jQuery pagelide插件的。

在 jQuery pageslide 插件中按回车时，控制台没有任何内容。

我怎样才能更好地解决这个问题？

【问题讨论】：

我相信我更了解这个问题。 Pageslide 插件创建了一个<div id="pageslide"></div>，我将聊天数据包裹在其中。我通过在咖啡文件中的引用之前添加#pageslide 来解决这个问题。所以$('#messagesDiv')变成$('div#pageslide #messagesDiv')

标签： jquery ruby-on-rails-3 coffeescript firebase

【解决方案1】：

Pageslide 插件创建了一个

<div id="pageslide"></div>

我将我的聊天数据包裹在其中。我通过添加

解决了这个问题

#pageslide

在咖啡文件中的引用之前。所以$('#messagesDiv')

变成$('div#pageslide #messagesDiv')

希望这对将来的某人有所帮助。

【讨论】：