뒤로 돌아갈 때 백본 컬렉션이 렌더링되지 않습니다.

Question

저는 Trigger.io를 사용하여 건물에있는 백본 응용 프로그램을 가지고 있으며 전화 도구 모음에서 뒤로 단추를 클릭하면 데이터가 사라지는 이유가 약간 있습니다. 여기

는 설정이다 : 나는 전망을

이 (간결함을 제거 Trigger.io 코드)처럼 보이는 SearchResultsView :

<script type="text/template" id="searchResultsView-template"> 
<div id="searchbar"></div> 
<h1>Results Bitch</h1> 
    <input type="text" id="searchBox"></input> 
    <input type="submit" id="submitQuery"></input> 
    <ul data-role="listview" id="resultsList"> 
    </ul> 
    <a href="locationdetail">Click me</a> 
</script> 

: 여기

window.SearchResultsView = Backbone.View.extend({ 

initialize: function() { 
    this.template = _.template($('#searchResultsView-template').html()); 
}, 

render: function() { 

    var self = this; 
    var renderedContent = this.template(); 
    $(this.el).html(renderedContent); 

    if (window.resultsCollection) { 
     self.drawList(window.resultsCollection); 
    } 

    return this; 
}, 

events: { 
    "click #submitQuery" : "processClick" 
}, 

drawList: function(collection) { 

     collection.each(function(place){ 
      window.console.log(place.get("name")); 
      $("#resultsList").append("<li><a href='#locationdetail/"+place.id+"' class='link'>" + place.get("name") +"</a></li>"); 
     }); 
}, 

processClick: function() { 

    var self=this; 
    this.querystring = $("#searchBox").val(); //get the query 

    window.resultsCollection = new Places(null, {query: this.querystring}); 
    window.resultsCollection.fetch(); //this is fetching via a call to the FourSquare API, and populating the models in the collection with that data 

    window.resultsCollection.bind('reset', function(collection){ 
     self.drawList(collection); 
    }); 
} 

}); 

템플릿입니다

여기 라우터가 있습니다.

searchresults: function() { 
    this.searchresults = new SearchResultsView({}); 
    $('#container').empty(); 
    $('#container').append(this.searchresults.render().el); 
}, 

실제로 작동하는 방법은 다음과 같습니다. 처음 페이지를로드 할 때 결과 목록이 없습니다. 쿼리를 입력하고 검색을 실행하면 목록이 다시 채워집니다. 그런 다음 항목을 클릭하여 다른보기로 이동하고 '뒤로'를 클릭하면 목록이 다시 비어 있습니다.

내가하려고하는 것은 컬렉션이 여전히 존재하는지 테스트하고, 그렇다면 테스트를 통해 목록을 다시 렌더링하지만 목록을 렌더링하지 않는다는 것입니다. 콘솔에 로그하고 데이터를 볼 수 있으므로 컬렉션은이 존재합니다.

내 생각에 #resultsList 요소를 사용할 수 없다는 것은 의심의 여지가 있습니다. 따라서 결과를 추가 할 때 찾을 수 없으므로 아무것도 표시되지 않습니다.

그래서 :

• 이 사운드 권리를합니까?
• 왜? 일이 잘 진행될 때 초기로드와 다른 점은 무엇입니까?

잘하면 나는 분명하다. 나는 모델과 컬렉션을 포함시키지 않았다. 이들이 도움이된다면, 나는 그들을 포함 시켜서 기쁘게 생각한다. (나는 이것이보기 문제라고 생각하는 경향이있다.)

감사합니다.

Answer 1

문제는 호출하는 메서드에서 렌더링 된 뷰를 첨부하는 방법과 관련이 있습니다. 아래의 라우터 방법

searchresults: function() { 
     this.searchresults = new SearchResultsView({}); 
     $('#container').empty(); 
     $('#container').append(this.searchresults.render().el); 
    }, 

먼저 부모 뷰에서 요소에 초기화 뷰의 엘을 첨부 한 후 렌더링해야에서

.

가끔씩 하위보기에서 HTML 항목의 html 요소를 찾아서 자기 자신의 경우와 같이 자체 검색 할 수 있기 때문에 필요합니다. 뷰가 렌더링 전에 첨부되지 않은 경우 렌더링 중에 생성 된 html은 실제로 windows.document의 일부가 아니므로 검색 가능한 (메모리에있는) 검색 할 수 없습니다.

귀하의 경우 아직 window.document에 포함되지 않은 요소를 검색하려고합니다.

var SearchResultsView = Backbone.View.extend({ 
    ... 
     drawList: function(collection) { 
       collection.each(function(place) { 
        window.console.log(place.get("name")); // this proves the collection is still here. But, it's not rendering? Because the DOM isn't finished rendering yet? 
        $("ul#resultsList").append("<li><a href='#locationdetail/" + place.id + "' class='link'>" + place.get("name") + "</a></li>"); 
       }); 
      }, 
... 
}); 

다음과 같이 변경하면 문제가 해결됩니다.

searchresults: function() { 
       this.searchresults = new SearchResultsView({}); 
       $('#container').empty(); 
       $('#container').append(this.searchresults.el); 
       this.searchresults.render(); 
      }, 

이제 SearchResultsView의 el은 window.document의 일부입니다. 뷰 내에 생성되고 첨부 된 모든 HTML은 window.document의 일부이며 검색 가능합니다.

다음은 코드를 기반으로 작성한 백본 코드가있는 샘플 작업용 HTML 파일입니다.

http://jsfiddle.net/venkat_kotra/rHWPL/