BackboneJS - this.collection is undefined - json

Question

i have this Backbone View:
define(['backbone','handlebars', 'text!templates/AlphabetList.html'],
function(Backbone,Handlebars, Template) {
'use strict';
var View = Backbone.View.extend({
template: Handlebars.compile(Template),
events: {
'click li':'li_clickHandler'
},
li_clickHandler: function(e) {
var id = $(e.currentTarget).attr('data-id');
Backbone.history.navigate('/category/'+id, {trigger:true});
},
initialize: function () {
},
render: function() {
$(this.el).html(this.template({menu:this.collection.toJSON()}));
return this;
}
});
return View;
}
);
here is my router:
define([
'backbone',
//Views
'views/ArtistTopImage',
'views/AlphabetList',
'collections/AlphabetCollection',
],
function(
Backbone,
AlphabetList,
ArtistTopImage,
AlphabetCollection
) {
'use strict';
var ArtistRouter = Backbone.Router.extend({
routes: {
'': 'index'
},
//Initializing the application
initialize: function () {
var self = this;
//Collections
this.AlphabetCollection = new AlphabetCollection({catId:0});
//Views
this.artistTopImageView = new ArtistTopImage({el:'.ti'});
this.AlphabetList = new AlphabetList({el:'#alphabetical', collection:this.AlphabetCollection});
self.artistTopImageView.render();
this.AlphabetCollection.fetch({success: function(collection) {
self.AlphabetList.collection=collection;
self.AlphabetList.render();
}});
Backbone.history.start({
pushState: false
});
},
//Default route.
index: function () {
var self = this;
},
});
return ArtistRouter;
}
);
And here is my Collection:
define([
"backbone",
"models/AlphabetModel"
],
function(Backbone, AlphabetModel) {
var AlphabetCollection = Backbone.Collection.extend({
model: AlphabetModel,
catId: null,
initialize: function(attrs) {
this.catId=attrs.catId;
},
url: function() {
return "Alphabetical"+this.catId+".json";
}
});
return AlphabetCollection;
});
The HTML template
<ol class="alist">
{{#each menu}}
<li data-id="{{this.url}}">{{this.name}}</li>
{{/each}}
</ol>
and the JSON file:
[
{
"name":"0-9",
"id":"1",
"url":"0"
},
{
"name":"A",
"id":"2",
"url":"1"
},
{
"name":"B",
"id":"3",
"url":"2"
},
{
"name":"C",
"id":"4",
"url":"3"
},
{
"name":"D",
"id":"5",
"url":"4"
}
]
this gives me an error: "this.collection is undefined". I dont know what the problem is, so does someone have an idea?