사이드 바보기가 이미 백본에서 렌더링되었는지 확인하는 방법?

일반적으로 사용자는 홈 페이지를 통해 웹 사이트에 입장 한 다음 사이드 바보기를 렌더링합니다. 그런 다음 사용자가 링크를 클릭하면 라우터가 다른보기를 렌더링하고 원본 콘텐츠보기를 대체합니다. 사이드 바보기가 다시 렌더링되지 않습니다.사이드 바보기가 이미 백본에서 렌더링되었는지 확인하는 방법?

사용자가 하위 페이지에서 새로 고침을 클릭하면 세로 막대가 렌더링되지 않습니다.

보기가 존재하고 렌더링되었는지 어떻게 확인합니까?

출처

2016-11-12 user2946632

책임을 분담하고 준수하십시오. 사이드 바 렌더링을 홈 페이지보기의 손에 넣지 마십시오.

당신은 내용, 헤더, 바닥 글 및 사이드 바 렌더링 처리하는 레이아웃보기를 가질 수있다. 그런 다음 사용자가 다른 페이지로 이동하면 라우터는 레이아웃보기에서 setContent(view)과 같은 것을 호출합니다. 그러면 콘텐츠를 렌더링하기 전에 사이드 바 (및 기타 모든 항목)가 렌더링되었는지 확인할 수 있습니다.

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     '*otherwise': 'homepage', 
     'specific/:id': 'specificPage' 
    }, 
    initialize: function() { 
     this.layout = new Layout(); 
     this.layout.render(); 
     this.views = {}; 
    }, 
    homepage: function() { 
     // These local variables improve minification and readability. 
     var views = this.views, 
      homepage = views.homepage; 
     if (!homepage) { 
      views.homepage = homepage = new HomePage(); 
     } 
     this.layout.setContent(homepage); 
    }, 
    specificPage: function(id){ 
     var views = this.views, 
      specific = views.specific; 
     if (!specific){ 
      views.specific = specific = new HomePage(); 
     } 
     specific.setId(id); // hypothetical logic 
     this.layout.setContent(specific); 
    } 
});

: 느리게 뷰를 생성 할 수

var Layout = Backbone.View.extend({ 
    el: 'body' // just for the simple example, let's put this as the body. 

    // This avoids repeating selector strings everywhere in the view code. 
    // If you change a class name in the template, change it only once here. 
    regions: { 
     header: '.header', 
     content: '.content', 
     sidebar: '.sidebar' 
    }, 
    initialize: function(options) { 
     var regions = this.regions; 

     // I like to "namespace" my sub-views into an object. 
     // That way, you still can access them by name, but you can also 
     // loop on the sub-views. 
     this.views = { 
      sidebar: new SideBar({ el: regions.sidebar }), 
      header: new Header({ el: regions.header }), 
     }; 

     this.$content = this.$(regions.content); 
    }, 

    render: function() { 
     _.invoke(this.views, 'render'); 
     return this; 
    }, 

    /** 
    * Set the content to a view. 
    * @param {Backbone.View} view to replace the content with. 
    */ 
    setContent: function(view) { 
     var views = this.views, 
      content = views.content; 
     if (content !== view) { 
      if (content) content.remove(); 
      views.content = content = view; 
      this.$content.html(content.render().el); 
     } 
    }, 
});

라우터 : 레이아웃 뷰처럼 간단 할 수

<body> 
    <div class="header"></div> 
    <div class="content"></div> 
    <div class="sidebar"></div> 
</body>

이 템플릿을 가정

출처

2016-11-12 21:21:41

사이드 바보기가 이미 백본에서 렌더링되었는지 확인하는 방법?

답변

관련 문제