0

左側に沿って垂直に積み重ねられた一連のナビゲーションピルがあります。ピルをクリックするたびに、div "report-html-content"に、以下に対応するコントローラーアクションによって生成されたhtmlのコンテンツがロードされるようにしますprogram_reports_path(@program)。

非常に単純なようです（確かに、確かに）。ビューは次のとおりです。

<div class="container">
  <div class="row">
    <div class="span2">
      <ul class="nav nav-pills nav-stacked">
        <li>
          <a href="#" data-toggle="pill">Trend lines for all questions</a>
        </li>
        <li>
           <%= link_to "Summary of all questions", program_reports_path(@program), 
                :remote => true, id: "reports-navlist", data: {toggle: "tab"} %>
        </li> 
        <li class="active">
          <a href="#" data-toggle="pill">Trend lines for all questions</a>
        </li>
        <li>
          <a href="#" data-toggle="pill">Details on all questions</a>
        </li>
      </ul>
    </div>
    <div class="span10" id="report-html-content">
    </div>
  </div>
</div>

コントローラのアクションは次のとおりです。

  def report1
    @program = Program.find(params[:program_id])
    render :partial => "report1", layout: false
  end

それはほとんど動作します。nav-pillセットにリモートを実行するように要求することを除いて：何らかの理由で別のURLにtrueを指定すると、タブのアクティブ化と非アクティブ化が機能しなくなります。

2つの質問があります：

1）私のバグが見えますか？

2）Rails3とTwitterBootstrapを使用してこれを実現するためのベストプラクティスの方法は何ですか。これらのレポートは計算にコストがかかる可能性があるため、クリックしたタブのコンテンツをajaxでフェッチする必要があることに注意してください。

ありがとうございました！

4

1 に答える 1

1

次のように show イベントを上書きします。

<div class="container">
  <div class="row">
    <div class="span2">
      <ul id="tabs" class="nav nav-pills nav-stacked">
        <li>
          <a href="#" data-toggle="pill">Trend lines for all questions</a>
        </li>
        <li>
          <a href="#" data-toggle="pill" id="reports-navlist">Summary of all questions</a>
        </li>
        <li class="active">
          <a href="#" data-toggle="pill">Trend lines for all questions</a>
        </li>
        <li>
          <a href="#" data-toggle="pill">Details on all questions</a>
        </li>
      </ul>
    </div>
    <div class="span10" id="report-html-content">
    </div>
  </div>
</div>

<script>
  $(function() {
    $('#tabs').bind('show', function(e) {
      if ($(e.target).attr('id') == 'reports-navlist')
        $.ajax({
          url: '<%= program_reports_path(@program) -%>',
          data: { toggle: "tab" }
        })
    });
  });
</script>

タブ イベントの詳細については、http://twitter.github.com/bootstrap/javascript.html#tabsを参照してください。

于 2012-09-01T21:45:51.020 に答える