0

これは主に、私が開発しようとしているWebアプリの実装に関する質問です。私は比較的経験が浅いので、実装のアイデアが適切かどうか、またはもっと簡単な方法があるかどうかを確認したいと思います。

問題

ユーザーのプロフィール写真とその名前を保持する小さなコンテナーを自動的に埋めるスクロール可能なサイドバーを作成したいと思います。基本的な考え方は、ユーザーはクラスのメンバーであり、サイドバーにはすべてのクラスメートを保持する必要があるということです。サイドバーは固定サイズである必要があり、ユーザーはクラスメートを下にスクロールして、ページにアクセスしたい場合はユーザーをクリックできる必要があります。

実装するための私のアイデア

充填プロセスを指示するために、埋め込まれたルビーを使用する必要があるように思われます。一部の擬似コードは、「このクラスのすべてのユーザーに対して、写真と名前を使用してコンテナーを作成する」という方針に沿ったものになります。このステップを実際に処理することについてはあまり考えていませんが、実際のhtml構造に主に関心があります。

私の考えは次のようなことをすることです：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <!-- for each user in class -->
                <div class="container-fluid">
                    <div class="row-fluid">
                        <div class="span">
                            <!-- Load appropriate user data -->
</div> where appropriate...

これは、これを強制するための「適切な」方法ですか？アイデアに関する多くの情報を見つけることができず、サンプルサイトのソースコードにアクセスすることは、サイドバーがすでにいっぱいになっているため、それほど役に立ちません...

4

1 に答える 1

1

サイドバーのHTMLとロジックを部分的に分割します（例： "app / views / shared / _sidebar.html.erb"）。そこから、レンダリングしているビューからのデータのコレクションを受け入れることができます。

ファイルを閲覧する

<div class="container-fluid">
  <div class="row-fluid">
    <%= render "shared/sidebar", collection: @users %>
  </div>
</div>

サイドバー部分

<div class="span2">
  .....
    <% @users.classmates.each do |e| %>
      <%= e.name %>
    <% end %>
  .....
</div>
于 2012-04-27T16:30:56.137 に答える