在新窗口中打开新视图

Question

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

假设页面布局如下所示：

link_1 |
link_2 | Right
link_2 |  

路由器如下：

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

当用户点击l1, l2 or l3 时，它会在窗口的Right part 上打开视图。
但是让我们假设用户想要在new window 中查看 Right 部分。
对于路由器的工作原理，它将渲染完整的 Vies（左右）。
我该如何解决这个问题？

附：
为了创建包含链接的左侧部分 (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 并附加到它，如果没有，那么这是一个新页面，所以创建一个 el 并附加。这解决了您在右键单击 new-page 或直接导航到 root/link:id 场景时遇到的麻烦，因为您的左侧菜单将不存在，并解决您在没有它的情况下让视图呈现整个页面的问题。

• root - 渲染菜单，并创建正确的 el。
• link_:id - 检查 el 是否存在，如果不存在，则创建并附加到它。

编辑：这是我的意思的示例

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