Twitter bootstrap 在Meteor中使用把手和推特引导进行干燥

我正在用twitter引导构建我的第一个web应用程序，我很喜欢它，但我遇到了重复自己的问题

我正在构建一个导航栏，我希望UI根据url反映哪个选项卡处于活动状态。我使用主干来路由URL。唯一的问题是，我必须根据url手动将一组不同的变量编码为“活动”或“”，以便选项卡反映适当的状态

<template name="navbar">

<div class="container">
    <div class="row">
    <div class="span6">
    <ul class="nav nav-tabs">
        <li class="{{home}}">
            <a href="/home/">Home</a></li>

        <li class="{{1999s10}}{{1965malibu}}{{1960hearse}}{{1966gto}}{{1971blazer}} dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown">Cars<b class="caret"></b></a>

            <ul class="dropdown-menu">
                <li class="{{1999s10}}"><a href="/cars/1999s10">1999 Electric S-10</a></li>
                <li class="{{1965malibu}}"><a href="/cars/1965malibu">1965 Malibu</a></li>
                <li class="{{1960hearse}}"><a href="/cars/1960hearse">1960 Hearse</a></li>
                <li class="{{1966gto}}"><a href="/cars/1966gto">1966 GTO</a></li>
                <li class="{{1971blazer}}"><a href="/cars/1971blazer">1971 Bazer</a></li>
                <!-- <li class="divider"></li> -->
            </ul>
        </li>  
    </div>
    </div>
</div>

使用此方法： （1） 存在以数字开头的变量问题（我的坏） （2） 要求我路由每个url以相应地更改会话“活动”变量 （3） 需要我为导航栏中的每个按钮/url创建一个模板处理程序

必须有更好的方法来做到这一点，但我还没有找到它

重申一下，我想找到一种方法，在不破坏枯燥（不要重复）编程原则的情况下激活必要的选项卡

编辑：

最好是这样：

<li class="{{(url=="/cars/1999s10/")?"active":""}}"><a href="/cars/1999s10">1999 Electric S-10</a></li>

<li class="{{TabClassName 'home'}}">

<li class="menu {{activeMenuItem 'persons'}}"> … </li>

---

这将是最少的代码量。

我正在使用静态应用程序状态类来处理我的应用程序的当前状态

它使用

会话

存储当前状态

在车把助手中，我测试正确的状态

（咖啡脚本）

Template.foo.helpers
是否处于活动状态：->
appState.isState appState.FOO

在模板中，我将使用它来设置链接的样式

{{{}如果处于活动状态}
{{else}
{{/if}

appstate对象非常简单

appState=
福：“福”
酒吧：“酒吧”
设置状态：（状态）->
Session.set（会话状态，状态）
getState:->
会话获取（会话状态）
isState:（州）->
@getState（）是状态

如果我的应用程序中的任何地方appstate发生了更改，就会发生反应魔法；）

appState.setState appState.LIST

更新： 使用

rendered

回调将活动类添加到导航项（未测试！）

Template.foo.rendered=->
当前=主干.history.fragment
links=this.findAll（“ul li a”）
links.forEach（（link）->
$（link.parent（）.addClass（“活动”），如果link.href是当前的
)

您可以尝试创建一个全局把手辅助对象，该辅助对象将路线名称作为参数，并返回正确的类名：

if (Meteor.isClient) {
    Handlebars.registerHelper('TabClassName', function (route) {
        return Session.equals("active", route) ? "active" : "";
    });
}

然后在模板中，按如下方式调用帮助器：

<li class="{{(url=="/cars/1999s10/")?"active":""}}"><a href="/cars/1999s10">1999 Electric S-10</a></li>

<li class="{{TabClassName 'home'}}">

<li class="menu {{activeMenuItem 'persons'}}"> … </li>

我发现了一些有效的方法：

Handlebars.registerHelper('TabActive', function (route) {
    var url = Session.get("url");
    var index = $.inArray(route, url);
    return (index != -1) ? "active" : "";
});


var TodosRouter = Backbone.Router.extend({
    routes: {
        "*url": "main"
    },
    main: function (url) {
        Session.set("url", url.split('/'))
    }
});

在html中，“vs”是至关重要的

<li class='{{TabActive "home"}}'>

#存储当前选定的引导选项卡，以便在重新加载时恢复活动状态
$（文档）。在“单击”上，a[data toggle=“tab”]”，（e）->
Session.set（“selected_tab”，$（e.target）.attr（“href”）.replace（“#”，”）
#用于确定选项卡导航的活动状态的帮助器
Handlebar.registerHelper“选项卡”（选项）->
$el=$（'
'）.html（options.fn（this））
$selected_tab=$el.find（'a[data toggle=“tab”][href=#'+Session.get（“selected_tab”）+']'））
$selected_tab=$el.find（'a[data toggle=“tab”]”）。如果$selected_tab.length==0，则为first（）
#将导航项目标记为活动
$selected_tab.parent（）.addClass（“活动”）
#将内容项标记为活动
$el.find（$selected_tab.attr（“href”））.addClass（“处于活动状态”）
返回$el.html（）

用法：

{{#tab}}
<ul class="nav nav-tabs">
  <li><a href="#article_tweet_pane" data-toggle="tab">Tweet</a></li>
  <li><a href="#article_blog_pane" data-toggle="tab">Blog</a></li>
  <li><a href="#article_newsletter_pane" data-toggle="tab">Newsletter</a></li>
</ul>

<div class="tab-content">
  <div id="article_tweet_pane" class="tab-pane fade">Tweet</div>
  <div id="article_blog_pane" class="tab-pane fade">Blog</div>
  <div id="article_newsletter_pane" class="tab-pane fade">Newsletter</div>
</div>
{{/tab}}

{{{#tab}





推特
博客
新闻稿
{{/tab}

正如jtblin所指出的，您可以使用模板帮助器来实现这一点。下面的代码使用Meteor>1.0和Iron Router>0.9.4运行

您可以传递正则表达式，而不是将路由名称传递给帮助器，如果您有子菜单，这会使它更合适

# file: /client/helpers.coffee

Template.registerHelper 'activeMenuItem', (expression) ->
   reg = new RegExp(expression, 'i')
   if reg.test Router.current().route.getName() then "active" else ""

在模板中使用帮助器，如下所示：

<li class="{{(url=="/cars/1999s10/")?"active":""}}"><a href="/cars/1999s10">1999 Electric S-10</a></li>

<li class="{{TabClassName 'home'}}">

<li class="menu {{activeMenuItem 'persons'}}"> … </li>

---

通过这种方式，您将获得所有以Person开头的路由的“活动”返回（例如PersonList、PersonAdd、PersonEdit等）。因此，如果你有子菜单，它也是一个很好的选择。

我知道你在这里做什么，但它仍然需要大量的代码来管理，比如说50个不同的URL。嗯，由于你不能像编辑时那样使用手柄，我不知道如何在meteor上开箱即用。因为我不必管理50个不同的URL，所以我的解决方案是对我来说…我用它来导航高亮显示和视图状态切换4种不同的状态。50将是另一个故事…还有一个想法：如果你在

模板中添加js/jquery高亮显示。渲染的
回调？你可以用普通javascript做任何你需要的事情，没有手柄限制。嗯。我不是说麻烦你了，但你能给我一个你会怎么做的例子吗？我只是不知道这将如何清理代码…这是0.8.2的更新代码，使用空格键和铁路由器：
UI.registerHelper（'TabClassName'，function（route）{if（router.current（））{return router.current（）.route.name==route？“活动“：”；}}）；
Iron router更改了访问路由名称的方式。现在需要调用
router.current（）.route.getName（）
。
# file: /client/helpers.coffee

Template.registerHelper 'activeMenuItem', (expression) ->
   reg = new RegExp(expression, 'i')
   if reg.test Router.current().route.getName() then "active" else ""