보기를 새로 고침하고 뒤로 버튼을 사용할 때의 문제

Question

나는 home, about, privacy 및 terms의 4 가지 경로가있는 간단한 백본 응용 프로그램을 작성합니다. 그러나 경로를 설정 한 후 나는이 문제가 : 나는 # 정보 또는 #privacy 페이지를 새로 고치면 # 개인 정보 보호보기/대한 # 내가 충돌

때 후

• , 홈 뷰 렌더링 뒤로 버튼을 누르면 집보기가 렌더링되지 않습니다. 나는 # 정보 페이지에있어, 그리고 예를 들어, 내가 홈페이지에 다시 버튼을 누르면, [정보보기

나는 두 problema가 뭔가 실종과 관련이 있다고 생각 페이지에 남아 홈 라우터지만, 나는 무엇인지 모르겠다.

다음

내 코드입니다 : http://jsfiddle.net/swayziak/Mm8Mt/

그리고 지금 코드 : 여기

는 jsfiddle입니다

HTML

<section class="feed"> 

    <script id="homeTemplate" type="text/template"> 

     <div class="home"> 
     </div> 

    </script> 

    <script id="termsTemplate" type="text/template"> 

     <div class="terms"> 
     Bla bla bla bla 
     </div> 

    </script> 

    <script id="privacyTemplate" type="text/template"> 

     <div class="privacy"> 
     Bla bla bla bla 
     </div> 

    </script> 

    <script id="aboutTemplate" type="text/template"> 

     <div class="about"> 
     Bla bla bla bla 
     </div> 

    </script> 

</section> 

견해

app.HomeListView = Backbone.View.extend({ 
    el: '.feed', 

    initialize: function (initialbooks) { 
     this.collection = new app.BookList (initialbooks); 
     this.render(); 
    }, 

    render: function() { 
     this.collection.each(function(item){ 
     this.renderHome(item); 
     }, this); 
    }, 

    renderHome: function (item) { 
     var bookview = new app.BookView ({ 
     model: item 
     }) 
     this.$el.append(bookview.render().el); 
     } }); 

app.BookView = Backbone.View.extend ({ 
    tagName: 'div', 
    className: 'home', 

    template: _.template($('#homeTemplate').html()), 

    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
     } 
}); 

app.AboutView = Backbone.View.extend({ 
    tagName: 'div', 
    className: 'about', 

    initialize:function() { 
     this.render(); 
    }, 

    template: _.template($('#aboutTemplate').html()), 

    render: function() { 
     this.$el.html(this.template()); 
     return this; 
    } 
}); 

app.PrivacyView = Backbone.View.extend ({ 
    tagName: 'div', 
    className: 'privacy', 

    initialize: function() { 
     this.render(); 
    }, 

    template: _.template($('#privacyTemplate').html()), 

    render: function() { 
     this.$el.html(this.template()); 
     return this; 
    } 
}); 

app.TermsView = Backbone.View.extend ({ 
    tagName: 'div', 
    className: 'terms', 

    initialize: function() { 
     this.render(); 
    }, 

    template: _.template ($('#termsTemplate').html()), 

    render: function() { 
     this.$el.html(this.template()); 
     return this; 
    } 
}); 

라우터 :

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     '' : 'home', 
     'about' : 'about', 
     'privacy' : 'privacy', 
     'terms' : 'terms' 
    }, 

    home: function() { 
     if (!this.homeListView) { 
      this.homeListView = new app.HomeListView(); 
     }; 
    }, 

    about: function() { 
     if (!this.aboutView) { 
      this.aboutView = new app.AboutView(); 
     }; 
     $('.feed').html(this.aboutView.el); 
    }, 

    privacy: function() { 
     if (!this.privacyView) { 
      this.privacyView = new app.PrivacyView(); 
     }; 
     $('.feed').html(this.privacyView.el); 
    }, 

    terms: function() { 
      if (!this.termsView) { 
      this.termsView = new app.TermsView(); 
     }; 
     $('.feed').html(this.termsView.el); 
    } 
}) 

app.Router = new AppRouter(); 
Backbone.history.start(); 

감사합니다.

Answer 1

다른 경로로 이동할 때마다 HomeView의 HTML을 바꾸는 것이 문제입니다. 또한 후속 호출에서 라우터의 home() 메소드에서 HomeView를 렌더링하지 않습니다.

보기를 한 번만 렌더링하려면 HomeView의 HTML을 바꾸지 않고 초기 렌더링 후에 수동으로보기를 숨기거나 표시해야합니다.