My goal is to showcase a collection of music artists organized by the first letter of their name.
This is how I have set up my Backbone View:
function (App, Backbone, utils) {
// Define 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;
}
Next, let's take a look at my Handlebars HTML:
<div class="artistsA">
{{#each this}}
<a href="{{name}}">{{name}}</a>
{{/each}}
</div>
Currently, the JSON data structure resembles the following (for the letter 'a' in this case):
data: [
{
artist_id:78,
name:A Band Of Boys
},
{
artist_id:79,
name:a Beautiful Friend
},
{
artist_id:80,
name:A Camp
}
and so forth...
While I can see the data being logged in the console, the webpage appears blank. It seems like there might be an issue with my implementation of Handlebars. Any insights on what could be going wrong?