在Meteor中使用把手和Twitter引导程序进行干洗

Question

我正在使用twitter bootstrap构建我的第一个Web应用程序,我很喜欢它,但我遇到了重复自己的问题.

我正在构建一个导航栏,我希望UI根据网址反映哪个选项卡处于活动状态.我正在使用骨干来路由网址.唯一的问题是我必须手动将一堆不同的变量编码为"活动"或""基于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>

正如您所看到的,现在,我有一堆变量用于指示哪些选项卡处于活动状态.我已经开始实现以下代码,但它非常优雅,我已经停止并希望使用更好的方法.

Template.navbar.home = function () {
    return Session.equals("active", "home") ? "active" : '';
};

// a bunch more of these for every route

var TodosRouter = Backbone.Router.extend({
    routes: {
        "home/": "home",
            // more routes
    },
    home: function () {
        Session.set("active", "home");
    },
    // more functions for capturing the routes and setting the session variable "active"
});

Router = new TodosRouter;

Meteor.startup(function () {
    Backbone.history.start({pushState: true});
});

使用这种方法:(1)存在以数字开头的变量问题(我的不好)(2)要求我路由每个url以相应地更改Session"active"变量(3)要求我为每个变量创建一个模板处理程序导航栏中的按钮/网址

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

重申一下,我想找到一种方法来完成激活必要的选项卡而不破坏DRY(不要重复自己)编程原理.

编辑:

真正好的是这样的:

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

那将是最少量的代码.

Answer 1

您可以尝试创建一个全局Handlebars帮助程序,它将路由名称作为参数并返回正确的类名:

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

然后在你的模板中,像这样调用帮助器:

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