1

主にテキストを含む基本ビューやグラフィカル機能を備えた高度なビューなど、さまざまなビューオプションを使用してRailsでビューページを作成するためのベストプラクティスは何ですか？具体的には、ユーザーが基本的な表示ビューと高度な表示ビューを切り替えることができるビューページが必要です。トグルボタンをクリックすると、選択したビューに対応する1セットのdivがレンダリングされます。これは、htmlマークアップのform_for / if-elseステートメントを介して実行する必要がありますか、それともjavascriptで実行する方がよいでしょうか。<div id="id">オン/オフの切り替えは、JavaScriptで次の方法で実行できると思います。

$("#id").show()
$("#id").hide()

Railsの実装がどのように行われるかを理解するのに問題があります。if-elseステートメントをどこに配置しますか（つまり、ユーザーの基本ビューが切り替えられた場合<div id="basic">、else <div id="advanced">）？

<%= form_for ??? do |f| %>
  ...
  <%= f.submit ??? %>           
<% end %>

編集2：

<div class="row">
  <div class="span6">
    <div class="btn-group" id="basic-advanced" data-toggle="buttons-radio">
        <a class="btn btn-small" href="#" id="basicbutton">Basic</a>
        <a class="btn btn-small" href="#" id="advancedbutton">Advanced</a>
    </div>
 </div>
</div>

<div class="container" id="basic">
  This is the basic view
</div>

<div class="container" id="advanced">
  This is the advanced view
</div>

今javascriptで私は次を持っています：

$("#basic").toggle();
$("#basic-advanced").click(function (){
  $("#basic").toggle();
  $("#advanced").toggle();
});

上記のコードを追加しましたが、ページがどの表示モードになっているのかを追跡するにはどうすればよいですか？回答から、インスタンス変数@viewing_modeをモードに対応する値に設定できるように見えますが、これはどのように行う必要がありますか？フォームを介して？

更新：セッション変数とif / elseステートメントを使用してトグルを達成することができました。手順は、次のとおりです。セッション変数が切り替え後に持続しない。

4

4 に答える 4

1

を使用jQuery.show()しjQuery.hide()ている場合、つまり、基本的なdivタグと高度なdivタグの両方をレンダリングする必要があります。Railsは両方をレンダリングする必要があります。あなたはただトグル display:hiddencssを持つことができます、ここで私は変数でそれをしました@use_advanced。

<div id="advanced" <%= (@use_advanced) ? '' : ' style="display:hidden"' %>>...

<div id="basic" <%= (@use_advanced) ? ' style="display:hidden"' : '' %>>...

2つを切り替えるには、ボタンを使用できます。<button>toggle</button>

$('button').click(function () {
  $('#advanced').toggle();
  $('#basic').toggle();
});
于 2012-12-02T15:58:29.340 に答える
1

There are some different cases:

1) if you are able to change your view using CSS only - then you should enclose all the page inside classified div:

<div class='my-style'>
  ...
</div>

2) if first solution is not applicable then you may use if-else statement:

<% if @my_style_selected %>
  <div>My style</div>
<% else %>
  <div>Default</div>
<% end %>

3) finally, if neither solution suits you. You may write some JS to dynamically replace your divs. The best solution is to replace some parts of the page using AJAX. If you will render both variants and hide one of them - that will almost double your page load time.

于 2012-12-02T16:05:21.777 に答える
1

Given that yiou are using rails I would look into using layout for different views rather than having conditional logic.

For more info see rails 3, how add a view that does not use same layout as rest of app?

于 2012-12-02T16:11:56.573 に答える
1

Here's a JavaScript object (written in CoffeScript) that will allow you to switch between as many modes as you like using a convention:

class ModeSwitcher
  constructor: ($area, modes) ->
    $area = $ $area
    me = this

    bindToggle = (mode) ->
      $area.find('a.toggle.' + mode).click ->
        me.toggle mode

    $ ->
      bindToggle(mode) for mode in modes

  toggle: (mode) ->
    $('.mode').hide()
    $('.' + mode + '.mode').show()

Here's an example of how you could construct the object (JavaScript/jQuery):

  var switcher = new ModeSwitcher('body', ['basic', 'advanced']);
  $(function() {
    switcher.switch("<%= @mode %>");
  });

The @mode instance variable is set in the Rails controller and says which mode the view should start out in:

@mode = params[:mode] || 'basic'

As for how it works by convention, you would have sections like this:

<div class="basic mode">...</div>
<div class="advanced mode">...</div>

And you would have links like this:

<a class="toggle advanced">Switch to advanced mode</a>
<a class="toggle basic">Switch to basic mode</a>

When constructed, the object will iterate through all the declared modes and look for the toggle links. It will then bind the toggling function to those links.

于 2012-12-04T16:58:49.523 に答える