0

我正在尝试动态显示与另一列中的选定项目相关联的项目列。见底部图片。因此，明确地说，如果您单击“减脂”程序，将显示减脂程序中的周期。

Tt 就像用单击的任何程序的 id 替换 3 in 一样简单Program.find(3).cycles.each，但是几个小时后，我无法弄清楚如何动态替换代码块中的代码。非常感谢您在正确方向上的任何帮助！

这是屏幕截图中页面的 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

我认为你应该将接口逻辑移到 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 回答
0

我相信在 Rails 中执行此操作的正确方法是将我想要出现和消失的代码部分移动到部分中，并使用 JS 使这些部分出现和消失。我能找到的关于如何做这类事情的最佳教程是 Ryan Bates rails tutorial on nested forms。

在 RailsCast 中，一旦您进入有关如何使表单域显示和删除的部分，您就会对如何执行此操作有一个很好的了解。

于 2013-10-08T16:39:20.490 回答