1

我目前<ul>在我的导航区域中有一个<%= render :partial => "sessions/manager" %>，它基本上调用另一个部分，这取决于用户的登录状态呈现登录表单或欢迎声明。

我的登录部分由 ajx 提供支持，因此会自动刷新。这是我使用的代码。

登录.js

$(document).ready(function() {

  $('form#sign_in').bind('ajax:success', function(e, data, status, xhr) {
    console.log(data);
    if(data.success) {
      $('.user_nav').html(data.content);
    } else {
      $('.user_nav').prepend(data.errors.join('<br />'));
    }
  });

});

现在我希望我的页面上有另一个 div，其中包含根据用户登录状态隐藏或显示的各种链接。

目前我的代码是这样的。

<% if(signed_in?) %>
  <li><%= link_to "Clients", "/clients"  %></li>
  <li><%= link_to "Jobs", "/jobs"  %></li> 
<% else %>
<% end %>

但是，这并不像 id 那样工作。链接一开始不显示，这很酷但是当我登录时链接不会再次显示......除非我刷新整页。

我怎样才能 ajax-ify 这个部分？

4

1 回答 1

1

最简单的方法是将divs 放在页面上，然后使用 javascript 设置切换其可见性。

把它放在你的代码中：

<li class="login-show" <%= signed_in? ? "" : "style='display:none'" %> >
  <%= link_to "Clients", "/clients"  %>
</li>
<li class="login-show" <%= signed_in? ? "" : "style='display:none'" %> >
  <%= link_to "Jobs", "/jobs"  %>
</li>

然后这是你的js：

 $('form#sign_in').bind('ajax:success', function(e, data, status, xhr) {
    console.log(data);
    if(data.success) {
      $('.user_nav').html(data.content);
      // show the li items hidden from non-logged in users
      $('.login-show').show();
    } else {
      $('.user_nav').prepend(data.errors.join('<br />'));
    }
  });
});

那应该行得通。但为了保持整洁，我会移动这个垃圾：

<%= logged_in? "" : "style='display:none'" %>

进入辅助方法

于 2012-05-29T06:36:59.940 回答