1

在 Rails 中创建具有不同视图选项的视图页面的最佳实践是什么，例如具有主要文本的基本视图和具有图形功能的高级视图？更具体地说，我想要一个视图页面，用户可以在其中切换基本/高级显示视图。单击切换按钮会呈现一组与所选视图相对应的 div。这应该通过 html 标记中的 form_for/if-else 语句来完成，还是最好在 javascript 中完成？我想打开<div id="id">/关闭可以通过以下方式在javascript中完成：

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

我在理解如何完成 rails 实现时遇到问题，我在哪里放置 if-else 语句（即，如果用户基本视图切换为 render <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 语句实现了切换，这里描述了该过程：Session variable not persisting after switch。

4

4 回答 4

1

这是一个 JavaScript 对象（用 CoffeScript 编写），它允许您使用约定在任意数量的模式之间切换：

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()

这是一个如何构造对象的示例（JavaScript/jQuery）：

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

实例变量在 Rails 控制器中设置，@mode并说明视图应该以哪种模式开始：

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

至于它是如何按惯例工作的，你会有这样的部分：

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

你会有这样的链接：

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

构造时，对象将遍历所有声明的模式并查找切换链接。然后它将切换功能绑定到这些链接。

于 2012-12-04T16:58:49.523 回答
1

如果您正在使用这意味着您需要呈现基本和高级 div 标签jQuery.show()。jQuery.hide()Rails 需要同时渲染它们。你可以只切换 display:hiddencss，这里我用 variable 做到了@use_advanced。

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

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

要在两者之间切换，您可以使用一个按钮：<button>toggle</button>

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

有一些不同的情况：

1）如果您只能使用更改视图CSS- 那么您应该将所有页面包含在分类 div 中：

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

2）如果第一个解决方案不适用，那么您可以使用 if-else 语句：

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

3）最后，如果两种解决方案都不适合您。你可以写一些JS来动态替换你的divs. 最好的解决方案是使用AJAX. 如果您将呈现这两个变体并隐藏其中一个 - 这将使您的页面加载时间几乎翻倍。

于 2012-12-02T16:05:21.777 回答
1

鉴于 yiou 正在使用 rails，我会考虑为不同的视图使用布局，而不是使用条件逻辑。

有关更多信息，请参阅rails 3，如何添加与应用程序其他部分不使用相同布局的视图？

于 2012-12-02T16:11:56.573 回答