首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >HandlebarsJS + BackboneJS循环遍历JSON数组

HandlebarsJS + BackboneJS循环遍历JSON数组
EN

Stack Overflow用户
提问于 2014-09-16 19:43:58
回答 1查看 76关注 0票数 0

我想要显示一个按开头字母排序的音乐艺术家列表。

所以我有这样一个主干视图:

代码语言:javascript
代码运行次数:0
运行
复制
function (App, Backbone, utils) {

    // Create a new module.
    var AllArtists = App.module();

    // Create view
    AllArtists.View = Backbone.View.extend({
        template: 'allArtistsList',
        initialize: function() {
            //this.listenTo(this.collection, 'sync', this);
        },
        afterRender: function(){
            var col1 = new Backbone.Collection();
            col1.url = App.APIO + '/i/search/artist?name=a';
            col1.fetch({success: function(){
                console.log(col1);
            }});
            this.insertView('.artistsA', new AllArtists.View({collection: col1}));

            var col2 = new Backbone.Collection();
            col2.url = App.APIO + '/i/search/artist?name=b';
            col2.fetch({success: function(){
                console.log(col2);
            }});
            this.insertView('.artistsB', new AllArtists.View({collection: col2}));          
        }
    });

    return AllArtists;
}

然后我就有了我的Handlebars:

代码语言:javascript
代码运行次数:0
运行
复制
<div class="artistsA">
    {{#each this}}
        <a href="{{name}}">{{name}}</a>
    {{/each}}   
</div>

到目前为止,我的JSON看起来像这样(在本例中是字母a):

代码语言:javascript
代码运行次数:0
运行
复制
data: [ 
        {
           artist_id:78, 
           name:A Band Of Boys
         },
          {
           artist_id:79, 
           name:a Beautiful Friend
         },
         {
           artist_id:80, 
           name:A Camp
        } 
        etc. etc...

我可以看到我的console.log返回了数据,但是我得到了一个空白页面,所以它表明我的把手有问题。我做错了什么?

EN

回答 1

Stack Overflow用户

发布于 2014-09-16 19:58:22

fetch()基本上是异步的,它将在内部调用异步的Ajax请求。一旦你的fetch调用成功,你就必须调用insertView()。您观察到的是空白页,因为您试图在获取数据之前调用insertView()。

如果要使其成为同步请求,则可以使用属性{async:false}

代码语言:javascript
代码运行次数:0
运行
复制
col1.fetch({async:false});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25867888

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档