在Meteor中使用把手和twitter引导程序进行干燥

Question

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

我正在构建一个导航栏，我希望用户界面反映出哪个选项卡是活动的基于url。我使用backbone来路由urls。唯一的问题是，我必须手动编写一堆不同的变量，使其基于url为"active“或"”，这样标签页才能反映适当的状态。

<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来相应地更改会话"active“变量(3)需要我为导航栏中的每个按钮/url创建一个模板处理程序。

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

重申一下，我想找到一种在不破坏DRY (不要重复自己)编程原则的情况下完成激活必要标签的方法。

编辑：

真正好的东西是这样的：

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

这将是最小数量的代码。

Answer 1

我发现了一些有用的东西：

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"}}'>

这是可行的，但我唯一关心的是稍后将路由器用于其他urls……

Answer 2

您可以尝试创建一个全局Handlebar helper，它将路由名称作为参数并返回正确的类名：

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

然后在您的模板中，像这样调用helper：

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

Answer 3

我使用一个静态应用程序状态类来处理我的应用程序的当前状态。

它使用Session来存储当前状态。

在handlebars helper中，我测试正确的状态。

(coffeescript)

Template.foo.helpers
  is_active: ->
    appState.isState appState.FOO

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

{{#if is_active}}
  <a href="/bar" class="active">/bar</a>
{{else}}
  <a href="/bar">/bar</a>
{{/if}}

appstate对象非常简单

appState =
  FOO : "foo"
  BAR: "bar"

  setState: (state) ->
    Session.set(SESSION_STATE, state)

  getState: ->
    Session.get(SESSION_STATE)

  isState: (state) ->
    @getState() is state

如果我的应用程序中的任何地方的appstate改变了，反应魔术就会发生;)

appState.setState appState.LIST

更新：

使用rendered回调将活动类添加到导航项(未测试！)

Template.foo.rendered = ->
  current = Backbone.history.fragment
  links = this.findAll("ul li a")

  links.forEach((link) ->
    $(link).parent().addClass("active") if link.href is current  
  )