骨干路由和视图状态答案

【问题标题】：Backbone routes and view states骨干路由和视图状态
【发布时间】：2013-02-23 20:34:56
【问题描述】：

对于可能表述不当的标题表示歉意。 Backbone 新手。

我在思考如何处理与视图关联的路线时遇到了麻烦。基本上我有一个观点（我们称之为ListView），根据它的viewMode，使用不同的模板呈现ItemViews。它看起来像这样：

var ListView = Backbone.View.extend({

    // Cache a bunch of templates here

    viewMode: 'list', // Default is list

    render: function() {

        switch(this.viewMode) {
            case 'list':
                // Render ItemView based on list template
                break;

            case 'gallery':
                // Render ItemView based on gallery template
                break;

        }

        // Render all items in list
        this.collection.each(function(model, index) {
            new ItemView(); // Maybe pass viewMode as a parameter
        });

    }

});

我的目标是，每当ListView 使用viewMode“列表”或“图库”时，这应该反映在地址栏中，同样手动输入或单击指向例如mysite.com/page.html#items/list 或 #items/gallery 应该呈现相同的结果。

有没有办法使这个过程自动化，或者以其他方式解决它？

【问题讨论】：

用户是如何在不通过路由器的情况下进入显示列表/图库和该视图的状态的？
目前列表视图只是在 AppView 中呈现。我慢慢得出结论，这可能根本不可取。

标签： backbone.js backbone-routing

【解决方案1】：

认为你的路由器会是这样的：

var yourRouter = Backbone.Router.extend({

    routes: {
        "items/list":    "showList",
        "items/gallery": "showGallery"
    },


    showList: function() {
        listView.viewMode = "list"
        listView.render();
    }

    showGallery: function() {
        listView.viewMode = "gallery"
        listView.render();
    }

});

然后在您的视图事件中，您可以调用路由器的navigate 方法。这将更新地址栏。

yourRouter.navigate("items/list")

【讨论】：