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"。哪种方法正确？

从头开始创建Link和LinkCollection模型，只要LinkCollectionView和LinkView：这对我来说似乎有些过分。并且似乎无用，因为链接不依赖于服务器端（它们不是动态创建的）。
创建迭代现有链接的Link和LinkCollection模型。
忘记模型和视图，并为每条路线手动设置class="active"。像$('body').find('a[href="#/customers"]').addClass('active')这样的东西。似乎重复了我的代码。
创建一个“全局”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类只需要在handleLink中调用jQuery / Zepto。

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

修改：出于语法效力的原因，使用steveax的data-route建议。

理解backbone.js作为一个整体

1 个答案: