我现在使用Awesome Nested Set gem创建一个层次结构，我想显示该层次结构。
我有一个带有典型控制器动作的索引页
klasses_controller.rb
def index
@klasses = Klass.where(depth: 0).order('lft ASC')
end
类/ index.rb
<div id="accordion" role="tablist" aria-multiselectable="true">
<% @klasses.each do |klass| %>
<%= render :partial => "klass", locals: {klass: klass} %>
<% end %>
</div>
在索引操作中，我称部分
class / _class.html.erb
<div class="klass">
<div class="klass-header" role="tab" id="heading-<%=klass.id%>">
<h5 class="mb-0">
<a data-toggle="collapse"
data-parent="#accordion"
href="#collapse-<%=klass.id%>"
aria-expanded="false"
aria-controls="collapse-<%=klass.id%>">
<%= klass.symbol + " : " + klass.title%>
</a>
</h5>
</div>
<div id="collapse-<%=klass.id%>"
class="collapse"
role="tabpanel"
aria-labelledby="heading-<%=klass.id%>">
<div class="klass-block">
<Here is where I want to render partial for each child>
</div>
</div>
</div>
这是标准的手风琴，正在按原样工作。这是我的数据库很大的问题，我不想渲染任何不必要的东西。我想等到单击标题后，再异步检索我单击的类的子级，并使用相同的局部变量渲染每个子级。
我怎样才能做到这一点？有没有一种使用路线/控制器动作组合的方法，还是应该开始编写coffee / java-script？我并没有尝试重新发明轮子，所以如果有人知道一个值得欢迎的例子。
这是一个棘手的问题，只是因为有很多活动部件。这是一个真正的摇头丸，但事后看来，这是很直接的。
首先，我想使用自定义控制器操作，因此我为“ children”方法添加了一条路由，该路由设置为接收ajax调用。
routes.rb
get 'klasses/:id/children', to: 'klasses#children', as: 'children_of'
klasses_controller.rb
def index
@klasses = Klass.where(depth: 0).order('lft ASC')
end
def children
respond_to do |format|
format.js {render 'children', :klass => @klass }
end
end
该响应块期望有一个children.js.erb可以调用。
children.js.erb
$("#collapse-<%[email protected]%>").html("<%= escape_javascript(render :partial => 'klasses/children', locals: { :klass => @klass })%>");
这是我们指定要插入新内容的div的地方，我们称为另一个局部。
_children.html.erb
<div class="child-block">
<% children = @klass.children %>
<% children.each do |child| %>
<%= render :partial => 'klasses/klass', locals: { :klass => child } %>
<% end %>
</div>
最后，我重写了_klass.html.erb部分，因此它的标题中具有一个链接，该链接将触发bootstrap的手风琴js并调用我们的新控制器动作。
_class.html.erb
<div class="klass">
<div class="klass-header" role="tab" id="heading-<%=klass.id%>">
<h5 class="mb-0">
<%= link_to klass.symbol + " : " + klass.title,
children_of_path(klass.id),
remote: true,
:data => { :toggle => "collapse",
:parent => "#accordion",
:target => "#collapse-#{klass.id}"
},
:aria => { :expanded => "false",
:controls => "collapse-#{klass.id}"
}%>
</h5>
</div>
<div id="collapse-<%=klass.id%>"
class="collapse"
role="tabpanel"
aria-labelledby="heading-<%=klass.id%>">
</div>
</div>
就是这样。在子块上添加一些填充，您将拥有一个漂亮的缩进层次结构，可以动态加载内容。
我确实必须为我的控制器中的自定义操作禁用跨站点请求伪造
protect_from_forgery :except => :children
如果有人知道解决方法，请告诉我。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句