0

backbone.js を使用してモバイル アプリを構築しています。これにより、ユーザーはチームのサッカー選手を選択できます。ユーザーが途中で停止した場合に、どのプレーヤーが選択されたかをアプリに記憶させたい。私はローカルストレージでこれをやっています。たとえば、ユーザーが途中で終了して「プレーヤーの選択」ページに戻り、すでに 2 人のプレーヤーを選択したとします。このページの html 文字列を次のように生成します。

html_string = テンプレート();

これは一連の div とネストされた div です。次に、ローカル ストレージから saved_selection を取得します。

saved_selection = JSON.parse(window.localStorage.getItem('match_selection'));
console.log(saved_selected);

出力は次のとおりです。

Object {236: "Forward_2", 243: "Forward_1"}

キーはプレーヤー ID で、値はその位置です。次に、各オブジェクトのキーと値のペアをループして、一致した div を置き換えます (この例では提供しません)。したがって、完全なレンダリング関数は次のとおりです。

    render: function (forArr) {
        saved_selection = JSON.parse(window.localStorage.getItem('match_selection'));

        html_string = template({forArr:forArr, saved_selection:saved_selection});

        console.log(saved_selection);

        if(UsefulFuncs.getObjSize(saved_selection)>0){
                for(var index in saved_selection) {  
                    var player = new models.Player({id: index});
                    player.fetch({success:function(model) {
                console.log('in success');  
            //do some matching and div replacement
                            html_string = "The new html string";
                       }});

                }
        }
        this.$el.html(html_string);
        return this;
    },

出力で2回成功することがわかりますが、返されたhtmlはまだ元のテンプレートであり、「新しいhtml文字列」ではありません....これは非同期呼び出しと関係があると思います... .

4

1 に答える 1

0

関数を次のように変更します。

render: function (forArr) {
    saved_selection = JSON.parse(window.localStorage.getItem('match_selection'));

    html_string = template({forArr:forArr, saved_selection:saved_selection});

    console.log(saved_selection);

    if(UsefulFuncs.getObjSize(saved_selection)>0){
            for(var index in saved_selection) {  
                var player = new models.Player({id: index});
                player.fetch({
                    success: function(model) {
                        console.log('in success');  
                        //do some matching and div replacement
                        html_string = "The new html string";
                        this.$el.html(html_string);
                    }});
            }
    }
    else {
        this.$el.html(html_string);
    }
    return this;
},

コールバック内で html 置換を行う必要があります。そうしないと、値がhtml_string変更される前にコンテンツが置換されます。

于 2013-09-19T16:37:18.327 に答える