1

Trigger.io で構築しているバックボーン アプリがあり、電話のツールバーの [戻る] ボタンをクリックするとデータが消える理由が少しわかりません。

セットアップは次のとおりです。

次のようなビュー、SearchResultsView があります (簡潔にするために Trigger.io コードは削除されています)。

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);
    });
}

});

テンプレートは次のとおりです。

<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>

そして、ここにルーターがあります：

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

実際にどのように機能するかは次のとおりです。最初にページをロードしたとき、結果のリストはありません (そうあるべきです)。クエリを入力して検索を実行すると、返されて、必要に応じてリストに入力されます。次に、アイテムをクリックして別のビューに移動し、[戻る] をクリックすると、リストは再び空になります。

私がやろうとしているのは、コレクションがまだ存在するかどうかをテストすることです。存在する場合は、先に進んでリストを再レンダリングしますが、リストをレンダリングすることはありません。コンソールにログを記録してデータを表示できるため、コレクションは存在します。

私の疑いでは、 #resultsList 要素がまだ利用できないため、結果を追加しようとすると、それが見つからないため、何も表示されません。

そう：

  • これは正しいと思いますか？
  • なんで？これは、正常に動作する初期ロードとどう違うのでしょうか?

うまくいけば、私は十分に明確です。簡潔にするために、モデルとコレクションは含めていません。それらが役立つ場合は、喜んでそれらを含めます (ただし、これはビューの問題であると考える傾向があります)。

ありがとう！

4

1 に答える 1

1

問題は、呼び出し元のメソッドでレンダリングされたビューをアタッチする方法にあります。

以下のルーター方式では

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

最初に初期化されたビューの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/

于 2012-07-25T04:58:18.783 に答える