Struggling to get routing to function properly in Backbone, I have tried my best but it still seems quite confusing. Here is a snippet of what I currently have:
routes: {
'' : 'home',
'home' : 'home',
'departments' : 'departments',
'employees' : 'employees',
'requests' : 'requests'
},
home: function(){
new app.HomeView();
},
This code resides within my router and of course, I call Backbone.history.start(). In my view, I adhere to the pattern of defining a render function and calling it from the initialize method.
el: '#containerList',
template: Handlebars.compile( $('#home-template').html() ),
initialize: function(){
this.render();
},
render: function(){
this.$el.html( this.template());
return this;
},
HTML:
<section id='main' class='container'>
<section id='containerList'></section>
</section>
I am encountering the following issues:
- When using the back button, views are getting appended instead of refreshed. A page reload is required to rectify this.
- Whenever typing a route into the browser's search bar, I need to refresh the page twice to display the view. The behavior is very erratic, sometimes rendering the views without the associated collections.
I have explored various strategies, such as using events on CloseView or utilizing this.remove when leaving the view. Unfortunately, none of these techniques seem to work for me. Documentation regarding routers in Backbone appears to be scarce.