새 창에서 새보기 열기

Question

Backbone.Router를 클라이언트 측 페이지 라우팅에 사용하는 백본으로 만든 웹 응용 프로그램이 있다고 가정 해 봅시다.

의 페이지 레이아웃은 다음과 같습니다 가정하자 :

link_1 | 
link_2 | Right 
link_2 | 

그리고 라우터 것은 다음

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

이 l1, l2 or l3의 사용자 클릭이 윈도우의 Right part에보기를 열 때 .
사용자가 new window에서 오른쪽 부분을보고 싶다고 가정 해 보겠습니다.
라우터 작동 방식에 따라 전체 Vies (오른쪽 및 왼쪽)가 렌더링됩니다.
이 문제를 어떻게 해결할 수 있습니까?

PS :

이

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

당신은을 발견 할 것이다 : 나는 (각 링크에 대해 하나) LinkView의 다른 인스턴스를 생성 ContainerView 다음 한 링크 (LinkView)을 포함 왼쪽을 만들기위한
메뉴를 사용하여 new window과 existing document을 구별 할 수 있습니다.

나는 이것을 생각하는 가장 쉬운 방법은 Backbone.history을 사용하는 것입니다. 루트 경로에있을 때 메뉴를 렌더링하고 오른쪽 부분을 첨부 할 el을 만들 수 있습니다. 그런 다음 링크를 클릭하면 링크 경로에 app router navigate이 붙습니다. 여기서 renderRight 경로 확인을 통해 right-el의 존재 여부를 확인할 수 있습니다. 그렇지 않은 경우 새 페이지이므로 el을 작성하고 첨부하십시오. 이렇게하면 오른쪽 클릭 new-page에 대한 문제를 해결하거나 root/link:id 시나리오로 직접 이동하여 왼쪽 메뉴가 없기 때문에보기없이 전체보기를 렌더링하는 문제를 해결할 수 있습니다.

• 루트 렌더링 메뉴를 만들고 오른쪽 엘을 만듭니다.
• 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();