Backbone.js一条路由上的混合路由结果

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

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);
            });
        }
    });

起初，我在名单上。我单击单个路线的链接以显示单个项目，然后立即按下“后退”按钮（返回到列表路线）。 问题是，这两种行为正在混合。有点由于异步行为，单个操作响应与当前列表视图混合。我在一条路线上看到了两种结果

-清除列表路线

-单程通行

-混合路线

---

如果我返回列表路由，如何禁用单路由回调

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

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

您应该创建一个AppView，根据模型显示相关视图。 每个子视图（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
});

您可以进一步阅读我写的关于将主干网用于应用程序体系结构的以下文章：

---

@Dato’Mohammad Nurdin请不要在美式英语和英式英语之间修改帖子。这是一个国际网站，两种形式都是有效的。