Rails 方式生成站点导航
大多数网站的导航采用 html 无序列表的形式,列表元素内有锚点。键入所有这些项目标签似乎不是创建导航列表的 Rails DRY 方法。
我问你如何创建一个以 Rails 方式导航的列表,以及你是否可以帮助我开发我正在尝试在下面描述的方法...
我所做的是在我的 application_helper 中创建一个哈希,然后在我的 erb 文件来为我生成列表。
应用程序助手:
$navPages = {
'top1' => "top1_path",
'top2' => "top2_path",
'top3' => "top3_path",
}
html.erb 迭代代码:
<ul>
<% $navPages.each do |ntext,npath| %>
<li><%= link_to ntext, self.send(npath.to_sym) %></li>
<% end %>
</ul>
列表输出:
<ul>
<li><a href="/">top1</a></li>
<li><a href="/">top2</a></li>
<li><a href="/">top3</a></li>
</ul>
这对我来说似乎非常正确......我在扩展带有“子项目”的列表或列表中的列表时遇到问题。
我创建了哈希:
$myHash = {
'top1' => { :location => "top1_path"},
'top2' => { :location => "top2_path", :members => {
"sub1-1" => { :location => "sub1_path"},
"sub1-2" => { :location => "sub2_path"},
"sub1-3" => { :location => "sub3_path"},
}
},
'top3' => { :location => "top3_path", :members => {
"sub2-1" => { :location => "sub1_path"},
"sub2-2" => { :location => "sub2_path"},
"sub2-3" => { :location => "sub3_path"},
}
}
}
我尝试了很多方法将该哈希转换为带有锚点的无序列表,但我还没有找到一个完美运行的干净解决方案。关于如何做到这一点有什么想法吗?我喜欢使用哈希来完成此任务的原因是,我可以捕获项目的关联以及其他有用的信息,例如我存储在 :location 符号中的链接位置。
我认为散列可以/应该换成更少打字的东西...就像
top1 loc
member1 loc
member2 loc
top2 loc
不确定在哪里统计:(
所以...用这些信息生成一个 HTML 列表似乎不太好对我来说railsy...rails 上的每个人都在做什么?
谢谢
!
Navigation for most websites takes the form of an html unordered list with anchors inside of the list elements. Typing out all of these item tags doesn't seem like the rails DRY way to create a list for navigation.
I ask how you create a list for navigation the rails way and if you could help me develop the method I'm attempting described below...
what I've done is create a hash in my application_helper and then added a quick iteration code in my erb file to generate the list for me.
app helper:
$navPages = {
'top1' => "top1_path",
'top2' => "top2_path",
'top3' => "top3_path",
}
html.erb iteration code:
<ul>
<% $navPages.each do |ntext,npath| %>
<li><%= link_to ntext, self.send(npath.to_sym) %></li>
<% end %>
</ul>
List output:
<ul>
<li><a href="/">top1</a></li>
<li><a href="/">top2</a></li>
<li><a href="/">top3</a></li>
</ul>
That seems VERY rails to me.... I'm having a problem expanding on this for lists with "sub-items" or lists within lists.
I created the hash:
$myHash = {
'top1' => { :location => "top1_path"},
'top2' => { :location => "top2_path", :members => {
"sub1-1" => { :location => "sub1_path"},
"sub1-2" => { :location => "sub2_path"},
"sub1-3" => { :location => "sub3_path"},
}
},
'top3' => { :location => "top3_path", :members => {
"sub2-1" => { :location => "sub1_path"},
"sub2-2" => { :location => "sub2_path"},
"sub2-3" => { :location => "sub3_path"},
}
}
}
I have tried many way to convert that hash into an unorded list with anchors but I haven't found a clean solution that works perfectly. Any thoughts on how to do this? The reason I like hashes for this task is that I can capture the association of items as well as other useful information such as the link location I've stored in the :location symbol.
I'm thinking that the hash could/should be traded in for something with less typing... like
top1 loc
member1 loc
member2 loc
top2 loc
not sure where to stat on that though :(
so... to Generate an HTML list with this information just doesn't seem very railsy to me... what is everyone on rails doing?
Thanks!
thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我的建议是考虑使用 简单导航 Gem。它有一个很好的 DSL 用于定义导航,并且您可以完全控制突出显示、子菜单显示以及使用的类和 id。
这是DSL 示例
My recommendation is to look into using the Simple Navigation Gem. This has a nice DSL for defining navigation, and you have complete control over highlighting, submenu display and classes and ids used.
Here is an example of the DSL
常见的做法是有几个 erb 文件,例如 shared/_nav.html.erb、shared/_subnav.html.erb ,原因如下:
Rails 方式的含义是:
所以Rails 不涉及特定的客户端表示的东西,那么你可以这样做以使代码清晰和简单。
我自己的观点是用JS构建导航更好,因为基于它做移动标记更容易
Common practice is to have couple erb files, something like shared/_nav.html.erb, shared/_subnav.html.erb for the reasons:
What means Rails way, is:
So Rails do not cover specific client-side representation things, then you can do it to make code clear and simple.
My own opinion is better to build navigation with JS, because it's easier to do mobile markup based on it