Breadcrumb using Backbone Marionette module - backbone.js

Question

I'm trying to implement breadcrumb using Backbone with Marionette's Module.
My idea is, to the UL tag add the LI tag one by one.
In my HTML I have a UL tag with id 'Breadcrumb'.
I created breadcrumb Module as below:
App.module("BreadcrumbModule", function(BreadcrumbModule){
var Breadcrumb = Backbone.Model.extend({
defaults:{
name : '',
link : ''
}
});
var BreadcrumbList = Backbone.Collection.extend({
model : Breadcrumb
});
var BreadcrumbView = Backbone.View.extend({
tagName : 'li',
render : function() {
$(this.el).html('' + this.model.get('name') + '');
return this;
}
});
var BreadcrumbListView = Backbone.View.extend({
el : '#Breadcrumb',
initialize : function() {
_.bindAll(this, 'render', 'appendBreadcrumb');
this.collection = new BreadcrumbList();
this.collection.bind('add', this.appendBreadcrumb);
},
render:function(){
$.each(this.collection.models, function(i, breadcrumb){
self.appendBreadcrumb(breadcrumb);
});
},
appendBreadcrumb: function(breadcrumb) {
var breadcrumbView = new BreadcrumbView({
model : breadcrumb
});
// THIS IS NOT WORKING!
$(this.el).append(breadcrumbView.render().el);
}
});
// Public function
BreadcrumbModule.getBreadcrumbListView = function(){
return new BreadcrumbListView();
}
BreadcrumbModule.getBreadcrumb = function(breadcrumb){
return new Breadcrumb(breadcrumb);
}
});
Tried to access in the same module:
breadcrumbListView = new BreadcrumbListView();
breadcrumb = new Breadcrumb({name : 'Home',link : 'home'});
breadcrumbView = new BreadcrumbView({model:breadcrumb});
breadcrumbListView.collection.add(breadcrumb);
In another module I'm adding an item to the breadcurmb as follows:
this.breadcrumbListView = App.BreadcrumbModule.getBreadcrumbListView();
breadcrumb = App.BreadcrumbModule.getBreadcrumb({link: 'home', name: 'Home'});
this.breadcrumbListView.collection.add(breadcrumb);
In both of the cases it is not working. I checked the LI tag is generated properly.
But it is not adding the value to the BreadcrumbListView's el '#Breadcrumb'.
in the function appendBreadcrumb() if I give as follows also its not working, but from the firebug it is working.
$('#Breadcrumb').html('ADD SOME TEXT');
But my main container $('#contentContainer') have scope and we can set value to it.
contentContainer -> in the HTML.
Breadcrumb -> in the template file.
That means from the view I cannot set value to an id coming from a template file.
Note: I'm not using RequireJS.
How can I fix this issue?
Thank you!
//San.