Question

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

所以我有这个Backbone View：

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

<div class="artistsA">
    {{#each this}}
        <a href="{{name}}">{{name}}</a>
    {{/each}}   
</div>

到目前为止，我的JSON看起来像这样（在本例中是字母a）：

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返回数据，但是我得到一个空白页面，这表明我的Handlebars有问题？我做错了什么？

Answer 1

基本上fetch（）是异步的，它将在内部调用异步的Ajax请求。一旦您的提取呼叫成功，即成功回拨，您必须致电insertView()。您正在观察空白页面，因为您在获取数据之前尝试调用insertView（）。

如果要进行同步请求，可以使用属性{async:false}

col1.fetch({async:false});

Handlebars JS + Backbone JS循环通过JSON数组

1 个答案: