使用Rails 3.2,是否应避免在视图中包含条件JavaScript?

时间:2012-04-19 15:22:26

标签: javascript ruby-on-rails-3.1 haml ruby-on-rails-3.2

众所周知Rails框架建议通过所谓的UJS严格分离JavaScript和Html,但有时,我发现自己需要在我的视图中包含JavaScripts的即兴片段。 首先,我想知道这是否正确?或者它不受欢迎?

我发现自己这样做的最常见的情况是,例如我有一个像这样的条件块:

= form_for @place do |f|
  %h5 Address:
  .input-prepend
    %span{ :class => "add-on" } 
      %i{ :class => "icon-road" }
    = f.text_field :address

  %h5 Name:
  .input-prepend
    %span{ :class => "add-on" } 
      %i{ :class => "icon-pencil" }
    = f.text_field :name

  = f.hidden_field :latitude
  = f.hidden_field :longitude

  #post-button
    %button{ :class => "btn btn-primary", :type => "submit" } Post it! 

- unless logged_in?
  :javascript
    $('#post-button > button, .input-prepend input').addClass('disabled');
    $('.input-prepend input').addClass('disabled');
    $('.input-prepend input').attr('disabled', 'disabled');
    new PopOver().setPopOver($('#post-button > button'), "You must be logged in to register your Business");

看看嵌套在除非条件下的代码,我想知道没关系将它放在那里,或者我应该以某种方式从控制器生成那部分代码吗?(并将它(渲染)传递给视图:在这种情况下我不知道该怎么做...)

请让我知道你的想法,我需要知道最有经验的Rails开发人员如何处理这类情况,所以,如果你是一个我很想读你的答案。

提前致谢!

PS。哦,请让我看看有关如何解决这个问题的代码选项,再次感谢!

1 个答案:

答案 0 :(得分:1)

UJS当然是目前Rails世界中最受欢迎的方法,但不同的开发人员将其置于不同的极端。我知道的一些开发人员完全避开它,因为根据他们的说法,当你只是看html时我不知道是否会通过JS对某一特定元素采取行动(我个人认为这很好,因为HTML只是关于结构,而不是功能)。

就您的特定问题而言,很明显您不能简单地将javascript放入常规的javascript文件夹中以加载页面,因为javascript将不知道您是否已登录。您可以放置​​一个指示器DOM中的某个位置表示您已登录,但对我来说太容易欺骗。根据服务器上的数据决定是否运行javascript的一种相当安全的方法是对服务器进行AJAX调用,如下所示:

  1. 浏览器加载的Javascript对服务器进行get AJAX调用(使用带jQuery的$ .getScript())
  2. Rails控制器中的操作使用.js.erb模板
  3. 响应AJAX调用
  4. 您可以将所需的服务器端逻辑放入.js.erb模板(例如,如果用户未登录则仅运行javascript)
  5. 这样,您可以将javascript(功能)保留在html(结构)之外,同时仍然可以做出服务器端决策。 dynamic page caching

    的railscast中有类似的情况

    例如,如果你的application.js中有:

    $.getScript('/users/show')
    

    然后,这会调用您的UsersController#show操作。然后Rails会查找app/views/users/show.js.erb模板。在此文件中,您可以拥有以下内容:

    <% unless logged_in? %>
      $('#post-button > button, .input-prepend input').addClass('disabled');
      $('.input-prepend input').addClass('disabled');
      $('.input-prepend input').attr('disabled', 'disabled');
      new PopOver().setPopOver($('#post-button > button'), "You must be logged in to register your Business");
    <% end %>
    

    一旦浏览器收到服务器的响应,javascript就会自动运行。在这种情况下,如果用户没有登录,它只会运行javascript。