Question

我一整天都试图解决以下挑战而没有任何运气。

在浏览论坛帖子时，我遇到了jQuery和AJAX，这对我来说都是新概念，如果可能的话，我现在宁愿跳过它。

我有一个部分的“navbar-left”，它显示了我的模型账户中所有银行账户的列表。当用户单击列表中的某个项目时，该帐户的所有事务都应显示在右侧的同一页面中。下面的部分链接到一个新页面，这不是我喜欢它。

navbar-partial：

<ul class="nav nav-pills nav-stacked">
  <% @accounts.each do |account| %>
    <li role="presentation"><%= link_to account.account_holder, account_mutations_path(account.id) %></li>
  <% end %>
</ul>

非常感谢有关如何修复此问题的任何提示！

The page with the navbar at the left

The mutations in a separate page instead of a partial

Answer 1

真正的AJAX是最好的方法，而且它并不像你想象的那么复杂。但是，如果您真的想跳过AJAX，那么您最好的方法可能是为所有帐户加载所有帐户，在不同的div中，然后根据点击的内容显示或隐藏它们。

有关javascript标签的初步介绍...您点击标签，会显示相应的信息。

http://www.w3schools.com/howto/howto_js_tabs.asp

Answer 2

您可以将观看者发送到新页面，也可以动态加载当前页面中的内容。

如果是后者，那么唯一的解决方案就是AJAX。

幸运的是，Ruby on Rails使得从一个转换到另一个非常容易。

以下是它如何运作的要点：

<%= link_to account.account_holder, account_mutations_path(account.id), remote: true %>

之前指向某个页面（例如action.html.erb）。

由于remote: true，它将直接将JS发送到浏览器而不是新的HTML页面（例如action.js.erb在同一个视图文件夹中，并且具有相同的操作名称。） / p>

在这里，我们可以通过使用ERB渲染部分并使用JS来更改页面某些部分的HTML内容来控制我们想要的行为：

// action.js.erb
$('#some_element').html('<%= j render "partial" %>')

将部分HTML直接插入到动态更改内容的JQuery中。

其中j是escape_javascript的简写。

没有转义，Ruby输出被解释为文件输出，换行符会破坏你的JS。

没有转义的JS输出示例：

// Bad
$('#some_element').html('<span>Content</span>
<span>More Content</span>')

转义示例：

// Good
$('#some_element').html('<span>Content</span>\n<span>More Content</span>')

http://guides.rubyonrails.org/working_with_javascript_in_rails.html

https://launchschool.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

网上有很多很棒的例子，甚至还有Railscasts。

Answer 3

如果没有ajax，你可以非常简单地完成这项工作。最大的区别是 - 它不是同一页面。一页是account#index（就像你现在一样），另一页是account#show页面。

对于展示页面，使用与索引页面非常相似的视图，左侧将包含部分帐户li class="active"，以突出显示您当前所在的帐户。对于页面的右侧，渲染帐户突变列表项。

显示部分索引的选择

3 个答案: