在新窗口中打開一個新視圖

假設我有一個使用Backbone.Router路由客戶端頁面的Backbone，
網絡應用程序。在新窗口中打開一個新視圖

讓我們假設頁面佈局看起來是這樣的：

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 

});

來源

2012-06-07 Lorraine Bernard

你必須找到一個用菜單區分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();

來源

2012-06-07 17:54:29

感謝您的時間，+1的樣本。我不確定明白你的意思。所以我在我的問題中增加了更多細節。你能寫幾行代碼嗎？或根據您的解決方案相應更改我的代碼。謝謝。 –

我不知道你是如何做你的路線，我正在編輯一些代碼給你一個想法，雖然我的意思。此外，我認爲在渲染視圖時使用視圖[el元素]（http://documentcloud.github.com/backbone/#View-el）可能是一個好主意。 –

現在很清楚，謝謝。 –

在新窗口中打開一個新視圖

回答

相關問題