在新窗口中打开新视图

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（左右）。
我该如何解决这个问题？

PS：
为了创建包含链接的左侧部分（ 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。 然后，当单击链接时，您将其捕获并让应用路由器导航到您的链接路由。 在这里，您可以对renderRight路由进行检查，以检查是否存在right-el并将其附加到该right-el ，如果不是，则这是一个新页面，因此请创建一个el并附加。 这解决了您在右键单击new-page或直接导航到root/link:id方案时遇到的麻烦，因为您的左菜单将不存在，并解决了没有该视图时显示整个页面的问题。

• 根-渲染菜单，并创建右侧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();