Question

假设我有一个使用Backbone制作的Web应用程序，
它使用Backbone.Router来路由客户端页面。

我们假设页面布局如下所示：

link_1 |
link_2 | Right
link_2 |

路由器如下：

routes: {
    'link_:id': 'renderRight'
}

当用户点击l1, l2 or l3时，它会打开窗口Right part上的视图但我们假设用户希望在new window中看到正确的部分对于路由器的工作方式，它将呈现完整的Vies（左右）我该如何解决这个问题？

P.S .:
为了创建包含链接（LinkView）的左侧部分，我有以下ContainerView创建LinkView的不同实例（每个链接一个）：

var ContainerView = Backbone.View.extend({

   // ContainerView Left Part

    addAll: function ()
    {
        this.collection.each(this.addOne);
    },

    addOne: function (task)
    {
        var view;
        view = new LinkView({ 
            model: task
        });

        this.$("#linkContainer").append(view.render().el);
    },

    // other codes

});

Answer 1

您必须找到一种方法来区分new window和带有菜单的existing document。

我能想到的最简单方法是使用Backbone.history。当您在根路径上时，您可以渲染菜单并为要附加的右侧部分创建el。然后，当单击链接时，您将捕获它并将app router navigate添加到您的链接路径。在这里，您可以通过renderRight路由检查是否存在right-el并附加到该new-page，如果没有，那么这是一个新页面，因此请创建el并附加。这样就可以在右键单击root/link:id或直接导航到var Application = Backbone.Router.extend({ routes: { "": "root" 'link_:id': 'renderRight', }, root: function() { //rednder link container var menu = new ContainerView(); $('body').append('<div id="linkContainer"/>','<div id="rightContainer"/>'); //create left and right container menu.render(); //render initial view of right container etc.. }, renderRight: function () { if ($('#rightContainer').length == 0) $('body').append('<div id="rightContainer"/>'); //check if a rightContainer is available if not create one //render right container to #rightContainer } }); var app = new Application(); Backbone.history.start();方案时解决您的问题，因为您的左侧菜单将不存在，并解决了无视图呈现整页的问题。

root - 渲染菜单，并创建右侧el。
link_：id - 检查是否存在el，如果没有创建并附加到该文件。

编辑：这是我的意思

的样本

{{1}}

在新窗口中打开新视图

1 个答案: