在rails分页中设置jquery移动属性

Question

我的应用程序有一个移动页面，它使用jquery移动“可折叠”数据角色来隐藏Micropost(Hartl的教程)，直到用户单击它们进行展开。

我还使用修改后的分页来呈现分页链接。https://gist.github.com/jugyo/3135120

<div data-role="collapsible">
  <h3>Show Microposts (<%= @user.microposts.count %>)</h3>
  <ul data-role="listview">
    <%= render @microposts %>
  </ul>
  <%= will_paginate @microposts, 
    renderer: WillPaginate::ActionView::JqueryMobilePaginateLinkRenderer,
    previous_label: 'Prev',
    next_label: 'Next'
  %>
</div>

我的问题是:如何将事件添加到分页单击？我想要折叠列表(默认设置)，在第一次加载页面时使用data-role=" collapsible“，但是当我单击next (或稍后单击prev)时，我希望可折叠容器添加data- loaded =”false“属性，以便打开列表。(单击“下一步”并再次转到折叠列表是没有意义的)

我要把它放在有分页代码的rb中吗？如果是这样，我该如何引用页面元素？或者我应该把一些jquery放在什么地方...？

感谢您的任何帮助。

Answer 1

您可以向分页添加class或id。我将添加一个id：

<%= will_paginate @microposts, 
  renderer: WillPaginate::ActionView::JqueryMobilePaginateLinkRenderer,
  id: 'my_pagination',
  previous_label: 'Prev',
  next_label: 'Next'
%>

然后给你的主div指定某种类型的标识符：

<div data-role="collapsible" id="my_list">

现在您可以使用jQuery手动激活它：

$("#my_pagination").click(function() { 
    $("#my_list").data("collapsed", $("#my_list").data('collapsed') == 'false' ? 'true' : 'false') 
 });