I am trying to define new attributes for a central controller (a backbone view actually) to make it more compartmentalised and structured. I try to separate the rendering I want to achieve in different cases by if statements, and implementing each case's rendering in those new attributes. But after insertion of the replacement code to achieve that and commenting of the code before it make my app not work.
What is the wrong thing I do.
Another way I can imagine to modularise it is to conditionally, again, to load different AMD/Require.js modeules I write, in a separate file/s, and load them. But How? Via require() inside the render:, or by new moduleName passed to the second argument to the define() below.
define([
'jquery',
'ratchet',
'underscore',
'backbone',
'models/login',
'text!templates/login.html',
'text!templates/app.html'
], function($, Ratchet, _, Backbone, LoginModel, LoginTmpl, AppTmpl){
var LoginView = Backbone.View.extend({
el: $("body"),
template_login: _.template(LoginTmpl),
template_app: _.template(AppTmpl),
initialize: function(){
this.model = new LoginModel;
this.listenTo(this.model, 'change', this.render);
this.render();
},
//Replacement code: two attributes:
render_login: function(){
this.$el.html(this.template_app( this.model.toJSON() ));
console.log(JSON.stringify(this.model) );
return this;
}
},
render_app: function(){
this.$("#content").html(this.template_login( this.model.toJSON() ));
console.log(JSON.stringify(this.model) );
return this;
},
render: function() {
/*
if (this.model.get('loginp') == true) {
this.$el.html(this.template_app( this.model.toJSON() ));
console.log(JSON.stringify(this.model) );
return this;
}
*/
/*
else {
this.$("#content").html(this.template_login( this.model.toJSON() ));
console.log(JSON.stringify(this.model) );
return this;
}
*/
//Replacement code:
if (this.model.get('loginp') == true) {
this.render_app;
} else {
this.render_login;
}
},
events: {
'click #loginbtn' : 'login',
'click #registerbtn' : 'register'
},
login: function(e){
e.preventDefault();
var formData = {};
$( 'input' ).each( function( i, el ) {
if( $(el).val() != '' ) {
if( el.id === 'username' ) {
formData[ el.id ] = $(el).val();
} else if( el.id === 'password' ) {
formData[ el.id ] = $(el).val();
}
}
console.log( i + ": " + $(el).val() );
console.log(JSON.stringify(formData) );
// Clear input field values
$( el ).val('');
});
this.model.save( formData );
}
});
return LoginView;
});
Summing up with the above answer, the forgotten brackets,
1-render_app and render_login to render_app() and render_login()
2-correcting the syntax error: the second bracket in render_login's function definition.
3-either interchanging render_app and render_login attribute names or the templates used in their anonym functions. they se each others'.