理解backbone.js作为一个整体

Question

编辑：这个问题与this one非常相似，但它更“概念上”。

假设一个单页的应用程序与静态链接的反弹反映routes：

<!-- Top navlist --> 
<ul class="nav nav-list"> 
    <li><a class="active" href="#/customers">Customers</a></li> 
</ul> 

<!-- Left navlist --> 
<ul class="nav nav-list"> 
    <li><a class="active" href="#/customers">Show customers</a></li> 
    <li><a href="#/customers/new">Create customer</a></li> 
</ul> 

我需要设置class="active"一个（或多个）基于当前路线上的链接。哪种方法是正确的？

1. 创建Link和LinkCollection模型，只要LinkCollectionView和LinkView，从头开始：这似乎矫枉过正给我。似乎没用，因为链接不依赖于服务器端（它们不是动态创建的）。
2. 创建Link和LinkCollection模型迭代现有链接。
3. 忘记模型，并为每条路线手动设置class="active"。像$('body').find('a[href="#/customers"]').addClass('active')。似乎代码重复给我。
4. 创建一个“全局”AppView视图并执行像pt。 3在render() funcion。

路由定义的例子：

<script> 
    (function($){ 
     var MyApp = { Models : {}, Collections : {}, Views : {} }; 

     // The Router 
     MyApp.Router = Backbone.Router.extend({ 
      routes : { 
       '/customers'  : 'showCustomersView', 
       '/customers/new' : 'showCreateCustomerView' 
      }, 
      showCustomersView  : function() { 
       // Make customers links active 
      }, 
      showCreateCustomerView : function() { 
       // Make new customer links active 
      }, 
     }); 

    })(jQuery); 
</script> 

Answer 1

我不能向“最佳实践”说话，但我相当肯定，涉及车型专为代表内部应用链接的目的是，为你说，绝对是过度杀伤，而不是他们的预期用途。

我个人会做类似于模式＃4的事情。在一个项目中，我目前的工作，我有一个看起来有点像这样的APPVIEW：

AppView = Backbone.View.extend({ 

    events: { 
    "click a.internal" : "handleLink" 
    }, 

    handleLink: function (event) { 
    var route = $(event.target).attr('data-route'); 
    router.navigate(route, true); 
    return false; 
    }, 

}); 

我不使用我的锚标签的实际href属性来指定目标路径，因为我使用pushState的。相反，我使用元素类internal来指示将用于我的应用程序内部导航的锚标记。然后我使用另一个任意元素属性route来指示链接应该去的地方。

链接可能看起来像这样的事情，那么：

<a href="#" class="internal" data-route="projects/3">My Third Project</a>

添加的额外位以添加CSS类，你要那么也只是做一个jQuery的/的Zepto调用的问题handleLink。

同样，我不一定相信这是一种常见的/最佳实践，但至少对我的目的来说，它似乎是足够简单和直接的（并且也适用于pushState）。

编辑：为了语法的有效性，使用steveax的建议data-route。