Today, I delved into the world of website development using backbone.js. Surprisingly, after a whole morning of trying to crack a puzzling problem, I find myself stuck.
Let me focus on the crucial bits of code here.
Initially, I have a View named Navigator that holds a Collection of Records (which is empty at first):
var NavigatorView = Backbone.View.extend({
template: JST['app/scripts/templates/Navigator.ejs'],
tagName: 'div',
id: '',
className: 'saiNavigator',
events: {},
initialize: function () {
this.currentRecords = new RecordsCollection();
this.currentRecords.on('reset', this.onRecordsCollectionReseted.bind(this));
},
// More functions and code snippets follow...
Then comes a view called "dossier" which has the following HTML structure:
<div id="dossier1" class="dossier">
<div id="dossier1-navContainer" class="navigatorContainer"/>
<div class="pagesNavigatorContainer"/>
<div class="pagesContainer"/>
<div class="readOnlyFiche"/>
</div>
When I render the dossier for the first time, I create the navigator as shown in the render function below:
// Code snippet for rendering the dossier
render: function () {
// Some rendering logic goes here
var nav = this.navigator = new NavigatorView({
model : this.model,
id: this.id+'navigator',
el: $('#'+this.id+'-navContainer')
});
// More rendering logic follows...
}
Each time I render the dossier, it creates a navigator that can load data through an AJAX request from the server. The issue arises when the second rendering occurs and the DOM doesn't update accordingly. Help!
After extensive discussions with Seebiscuit, adding a few lines like the ones below helped clarify the situation:
// Additional lines added after discussion
newTask.render();
var taskHtml = newTask.$el.html();
$('#mainTaskContainer').append(taskHtml);