Question

我的应用需要多个顶级导航标签（例如水果和蔬菜）。单击时，应该应用id（例如#fruits）。你会如何使用backbone.js来解决这个问题？

一些想法：（假设存在一个名为body_id（）的函数）

每个视图路径：当访问'＃/ fruits'时，调用body_id（'fruits'）。（骗局：不是DRY，每条路线需要body_id（），例如'＃/ fruits /：id'
选项1，但使用之前的过滤器（https://github.com/FLOChip/backbone_router_filter）。

我不禁想到有更好的方法。建议？

谢谢！

Answer 1

我为响应路由器的所有视图创建了一个超类。（我有其他视图，子视图或小部件，如果你愿意的话。）这个超类具有隐藏/显示路由视图所需的所有智能，以及使用选项卡为所有视图装饰容器。所有路由视图都从该类继承。路由视图和路由器都“学习”公共池中的ID，并使用下划线的template函数即时构建，因此信息存储在一个地方，保留DRY。

一些观点（关于集合，“水果”或“蔬菜”的观点）是永久标签，并且一些标签（关于集合中的个别项目的视图，即“香蕉”或“黄瓜”）是临时的。路由器具有方法调用以区分#/:type和#/:type/:id，后者根据需要创建。路由器中的变量跟踪已经生成了哪些视图，以及需要构建哪些视图，如果用户没有要求，则不构造视图来保留存储器，例如：

Controller.prototype.item = function(type, id) {
    var v, view;
    view = ((v = this.views)[type + '.' + id]) || (v[type + '.' + id] = (
        new ItemView({model: this.collections.getByCid(type).getByCid(id)})).render());
    view.show();
}

请注意，在这个成语（由Coffeescript呈现）中，您的render方法return this;至关重要。这允许 new 视图在显示之前自我渲染;据推测，现有的视图已经被渲染，不需要重新渲染，只需要优雅的淡入淡出/滑动/无论如何。

你可以得到特别像素完美并让render（）返回一个jQuery.deferred对象，并调用.then(view.show)，以确保在显示之前渲染完成。

backbone.js中的选项卡式视图状态

1 个答案: