Question

我有一个数据容器（#data）和简单的路由器来填充这个：

var Router = Backbone.Router.extend({
    routes: {
        '': 'list',
        ':id': 'single'
    },
    single: function(id) {
        $('#data').empty();
        var applicationModel = new applications.Models.application();
        applicationModel.fetch({
            data: {
                id: id
            }).then(function() {
            var applicationView = new applications.Views.application({
                model: applicationModel
            });
            $('#data').append(applicationView.render().el);
        });
        }, list: function() {
            $('#data').empty();
            var applicationsCollection = new applications.Collections.applications();
            applicationsCollection.fetch().then(function() {
                var applicationsView = new applications.Views.applications({
                    collection: applicationsCollection
                });
                $('#data').append(applicationsView.render().el);
            });
        }
    });

最初我在 list 路线上。我点击指向单一路线的链接以显示单个项目，然后立即按下＆＃39;返回＆＃39;按钮（返回列表路线）。问题是这两个行动都变得混杂了。的种类。由于异步行为，单操作响应与当前列表视图混合在一起。而且我在一条路线上看到了两个结果。

http://joxi.ru/6FApUxjKTJAYNk_vbKQ - 清除列表路线

http://joxi.ru/UlEpU_3JTJAgdOsGbY0 - 清除单一路线

http://joxi.ru/jFEpUxjKTJAeNt5Ptw8 - 混合路线？！

如果我回到 list 路由，如何禁用单个路由回调？

Answer 1

我认为你应该以不同的方式解决使用骨干路由器的问题。您应该将应用程序的视图，路由器和模型分开。路由器和视图之间可以共享一个应用程序模型。

var AppModel = Backbone.Model.extend({
    defaults: {
        view: '',
        // should hold any additional params for the view
        viewParams: {}
    }
});

您应该创建一个AppView，根据模型显示相关视图。每个subView（SingleView，ListView）都应该创建自己的模型/集合并启动提取调用。

var AppView = Backbone.View.extend({
    id: '#data',
    initialize: function() {
        this.listenTo(this.model, 'change:view', this.renderView);
    },
    views: {
        'list': ListView,
        'single': SingleView
    },
    renderView: function(model, view) {
        // create the appropriate view
        // remove the current view, any listeners to it
        // each view should create it's own models and initiate fetch
        // the selected view dom "el" should be appended to this.el (appview) view
    }
});

路由器只应使用相关数据更新模型，在您的情况下：

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'list',
        ':id': 'single'
    },
    initialize: function(options) {
        this.model = options.model;
    },
    list: function() {
        this.model.set({
            view: 'list'
        });
    },
    single: function(id) {
        this.model.set({
            viewParams: {
                id: id
            }
        });
        this.model.set({
            view: 'single'
        });
    }
})
var app = {};
app.model = new AppModel();
app.view = new AppView({
    model: app.model
});
app.router = new AppRouter({
    model: app.model
});

你可以进一步阅读我写的关于使用骨干应用程序架构的以下帖子：

Backbone.js在一条路线上混合路线

1 个答案: