twitter-bootstrap - 在 Meteor 中使用 handlebars 和 twitter bootstrap 进行 DRY

Question

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

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

<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 “事件”变量(3) 要求我为导航栏中的每个按钮/url 制作一个模板处理程序

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

重申一下，我想找到一种方法来完成激活必要的选项卡而不破坏 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'}}">