2


クライアント側のページのルーティングに Backbone.Router を使用する、Backbone で作成された Web アプリケーションがあるとします。

ページ レイアウトが次のようになっているとします。

link_1 |
link_2 | Right
link_2 |

ルーターは次のとおりです。

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

ユーザーがそれをクリックすると、ウィンドウl1, l2 or l3のビューが開きRight partます。
しかし、ユーザーが の右部分を見たいとしますnew window。
ルーターがどのように機能するかについては、完全なバイ (左右) をレンダリングします。
この問題を解決するにはどうすればよいですか?

PS:
リンク ( ) を含む左側の部分を作成するために、 (リンクごとに 1 つ)の異なるインスタンスを作成LinkViewする次のものがあります。ContainerViewLinkView

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ルートにaの存在を確認してright-el添付することができます。そうでない場合は、これは新しいページなので、elを作成して添付します。これにより、左メニューが存在しないため、右クリックまたはシナリオnew-pageへの直接ナビゲーションの問題が解決され、メニューがないとビューがページ全体にレンダリングされるという問題が解決されます。root/link:id

  • root-メニューをレンダリングし、右のelを作成します。
  • link_：id-elが存在するかどうかを確認します。存在しない場合は、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 に答える