Question

在使用Jquery和JqueryUI的rails 3应用程序中，我正在渲染部分以显示Items的折叠列表。我希望调用一个控制器动作（让我们称之为Item#get_details动作），以便在扩展适当的手风琴组件时通过关于该项目的Web服务检索其他细节。

传递给partial的项目集合包含描述和项目编号，如下所示：

render :partial => 'candidates' , :collection => @candidates
#Candidates is a list of hashes, each hash containing keys "Desc" and "id_number"

每次传递部分渲染标记，jqueryUI将其呈现为手风琴部分，如下所示：

<h3><%= candidate[:desc] %>
<div id="candidate_details">
</div>

将控制器调用绑定到<h3>的最佳做法是什么，它会在激活手风琴项目时检索详细信息并填充“candidate_details”div？

提前致谢。

Answer 1

首先，我要关闭<h3>。然后使用<h3>上的数据属性来保存id_number：

<h3 data-id="<%= candidate[:id_number] %>"><%= candidate[:desc] %></h3>
<div id="candidate_details"></div>

听起来你希望你的手风琴开始关闭所有东西，所以你会用这样的东西绑定手风琴：

// Adjust these options to match your needs of course...
$("#accordion").accordion({
    collapsible: true,
    autoHeight: false,
    active: false
});

collapsible选项允许一次关闭所有面板，autoHeight设置允许面板调整大小以适应其内容，active设置启动它们全部关闭

然后，您可以使用one将点击处理程序绑定到<h3>，它将在首次激活后自行删除。该单击处理程序可以挖出data-id值并执行AJAX调用以获取相应<div>的内容：

$('#accordion').find('h3').one('click', function() {
    var id = $(this).data('id');
    $(this).next().load('/some/path/' + id);
});

然后您的控制器将使用id查找必要的内容并将其作为一小部分HTML发回。

jQuery-UI方面的演示：http://jsfiddle.net/ambiguous/BhJYv/

调用控制器在扩展时填充手风琴项目

1 个答案: