0

選択したアイテムに関連付けられたアイテムの列を別の列に動的に表示しようとしています。下部の写真を参照してください。つまり、プログラム「Fat Loss」をクリックすると、Fat Loss Program にあるサイクルが表示されます。

Program.find(3).cycles.eachクリックしたプログラムの id で3 を置き換えるのと同じくらい簡単ですが、数時間後、コード ブロック内のコードを動的に置き換える方法がわかりません。正しい方向への助けは本当にありがたいです!

これは、スクリーンショットのページの html です。

<h2>Program</h2>
              <ul class="sortable" data-update-url="<%= sort_programs_url %>">
                <% @programs.each do |program| %>
                  <%= content_tag_for :li, program, class: "card" do %>
                    <%= link_to program.name, program %>
                  <% end %>
                <% end %>
              </ul>
              <%= link_to 'Add New Program', new_program_path, :class => 'add-new' %>
              <!-- Column one end -->
            </div>
            <div id="col2">
              <!-- Column two start -->
              <h2>Cycle</h2>
              <ul class="sortable">
                <% Program.find(3).cycles.each do |cycle| %>
                <li class="card" id="cycle-<%= cycle.id %>">
                  <%= truncate(cycle.name, :length => 20, :separator => ' ') %>
                </li>
              <% end %>
              </ul>
              <%= link_to 'Add New Cycle', new_cycle_path, :class => 'add-new' %>
              <!-- Column two end -->
            </div>

そしてモデル:

class Program < ActiveRecord::Base

  has_many :cycles_programs
  has_many :cycles, :through => :cycles_programs

class Cycle < ActiveRecord::Base

  has_many :cycles_programs
  has_many :programs, :through => :cycles_programs

ここに画像の説明を入力

4

2 に答える 2

0

Railsでこれを行う正しい方法は、コードの表示および非表示にしたい部分をパーシャルに移動し、JSを使用してそれらのパーシャルを表示および非表示にすることだと思います。この種のことを行う方法について私が見つけることができる最高のチュートリアルは、入れ子になったフォームに関する Ryan Bates rails tutorialです。

RailsCast で、フォーム フィールドを表示および削除する方法のセクションに入ると、これを行う方法のかなりのアイデアが得られます。

于 2013-10-08T16:39:20.490 に答える
0

インターフェイス ロジックを JavaScript に移動する必要があると思います。次に例を示します。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div { width: 300px; float: left; margin-right: 20px; }
        li { list-style: none; border: 1px solid #555; border-radius: 5px; padding: 20px; margin: 5px;}
    </style>
</head>
<body>
<div class="program">
    <h2>Program</h2>
    <ul id="programs">
    </ul>
    <a href="#add_program">Add Program</a>
</div>
<div class="cycle">
    <h2>Cycle</h2>
    <ul id="cycles">
    </ul>
    <a href="#add_cycle">Add Cycle</a>
</div>
<script type="text/javascript">
    //  Source data via ajax? constructed as part of building page?
    var data = [
        {name:'Fat Loss', cycles: ['Cycle 1', 'Cycle 2']},
        {name:'Licks balls', cycles: ['Cycle 3', 'Cycle 4']},
        {name:'klasdjfa', cycles: ['ReCycle', 'Deep Cycle', 'UniCycle']},
        {name:'Testing Programs', cycles: ['Scotch', 'Soda']},
        {name:'Hypertrophy', cycles: ['Clockwise', 'CounterClockwise', 'Sidewise']}
    ];
    //  display set of cycles   
    var display_cycles = function(cycle_list) {
        var cycles = document.getElementById('cycles');
        var cycle;
        cycles.innerHTML = '';

        for ( var k in cycle_list ) {
            cycle = document.createElement('li');
            cycle.innerHTML = cycle_list[k];
            cycles.appendChild(cycle);
        }
    };

    var programs = document.getElementById('programs');
    var program, trigger;

    // initial programs display
    for ( var j in data ) {
        program = document.createElement('li');
        trigger = document.createElement('a');
        trigger.setAttribute('href', '#'+j);
        trigger.setAttribute('class', 'trigger_cycles');
        trigger.setAttribute('onclick', 'display_cycles(data['+j+']["cycles"])');
        trigger.innerHTML = data[j]['name'];
        program.appendChild(trigger);
        programs.appendChild(program);
    }

    //  Cycles for the first program
    display_cycles(data[0]['cycles']);
</script>
</body>
</html>
于 2013-06-12T07:12:46.357 に答える