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

我可以在输出中看到它两次成功，但返回的 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 回答