2

假设我有一个使用 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

});
4

1 回答 1

1

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

我能想到的最简单的方法是使用Backbone.history。当您在根路径上时，您可以渲染菜单并为要附加的正确部分创建一个 el。然后，当单击链接时，您会捕获它并让应用程序路由器导航到您的链接路由。在这里，您可以让您的renderRight路线检查是否存在 aright-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();
于 2012-06-07T17:54:29.477 回答