部分的にインデックスを表示する

Question

私は一日中、次のような挑戦を何とか解決しようとしています。

フォーラムの記事を読むと、jQueryとAJAXが出てきました。どちらも私にとって新しい概念であり、可能であれば私はむしろここでスキップしたいと思います。

モデルのアカウントにあるすべての銀行口座の一覧を表示する部分的な「navbar-left」があります。 ユーザーがリスト内のアイテムの1つをクリックすると、そのアカウントのすべてのトランザクションが右側の同じページに表示されます。私はそれが好きではない新しいページへのリンクの下に部分的です。

ナビゲーションバー-部分：

<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です。

幸いなことに、Ruby on Railsは、1つから他のものへの移行を非常に簡単にします。ここで

は、それがどのように動作するかの要点である：

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

これは、以前に（例えばaction.html.erb）いくつかのページに戻って指していました。

remote: trueのため、新しいHTMLページではなくブラウザにJSを直接送信します（同じビューフォルダ内で同じアクション名にaction.js.erbなど）。ここで

我々は、部分的にレンダリングERBを使用して、ページの一部のHTMLコンテンツを変更するJSを使用して私たちが望む動作を制御することができますに部分のHTMLを直接挿入します

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

コンテンツを動的に変更する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 2

本当にAJAXは、これを行うための最善の方法であり、それはあなたが考えるほど複雑ではありません。しかし、本当にAJAXをスキップしたいのであれば、おそらくあなたの最良のアプローチは、すべての取引をすべての勘定科目、異なる勘定科目にロードし、クリックに基づいてそれらを表示または非表示にすることです。

javascriptのタブを見て、タブをクリックすると、適切な情報が表示されます。

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

Answer 3

これは非常に簡単にajaxなしで行うことができます。大きな違いは、同じページではないことです。 1つのページはaccount#index（これまでどおり）、もう1ページはaccount#showページです。

表示ページについては、インデックスページと非常によく似たビューを使用します。左側には、アカウントli class="active"のうちの1つを含むパーシャルが現在表示されているアカウントを強調表示します。ページの右側に、アカウントの突然変異のリスト項目を表示します。