MarionetteJS - Not able to render the data using toJSON function - backbone.js

Question

I am using HandlebarsJS plugin to render my templates. I am getting error while i call the rendering function.
when i console the this.model.toJSON(), i am getting correct datas, as well I console the "homeEditTemp" I am getting my templates too..
But when i pass my data to template i am getting error as : Uncaught TypeError: undefined is not a function
here is my code :
define([
'jquery',
'underscore',
'backbone',
'marionette',
'hbs!scripts/templates/home/homeEditTemp'],
function ($,_,Backbone, Marionette, homeEditTemp) {
"use strict";
window.socialApp = window.socialApp || {};
socialApp.homeView = Backbone.Marionette.ItemView.extend({
initialize : function (model) {
this.model = model;
},
render : function () {
console.log(this.model.toJSON()) // works fine
console.log(homeEditTemp) // works fine.
this.$el.html(homeEditTemp(this.model.toJSON())); // throws the error..
}
});
return socialApp.homeView;
});
here is my handlebars template :
<form>
<div class="control-group">
<label for="firstName" class="control-label"> First name:</label>
<input id="firstName" name="firstName" type="text" value="{{firstName}}"/>
</div>
<div class="control-group">
<label for="lastName" class="control-label"> Last name:</label>
<input id="lastName" name="lastName" type="text" value="{{lastName}}"/>
</div>
<div class="control-group">
<label for="email" class="control-label">Phone number:</label>
<input id="email" name="email" type="text" value="{{email}}"/>
</div>
<button class="btn js-submit">Save</button>
</form>
Thanks in advance!
update :
when i manually assign the value, it works fine like this:
render : function (model) {
var obj = {
"firstName" : "testFirstName ",
"lastName" : " test lastName"
}
this.$el.html(homeEditTemp(obj));
}
what would be the issue?
when i console my model it show like this:
Object {model: s}model: s_changing: false_events: Object_pending: false_previousAttributes: Objectattributes: Objectchanged: Objectcid: "c6"__proto__: n__proto__: Object

Answer 1

At first you need to compile your template
var tpl = function () {
return Handlebars.compile(homeEditTemp);
}
Then you can use this
this.$el.html(tpl(this.model.toJSON()));

Answer 2

try it like this:
socialApp.homeView = Backbone.Marionette.ItemView.extend({
template:homeEditTemp,
initialize : function (model) {
this.model = model;
},
render : function () {
var output = this.template(this.model.toJSON());
this.$el.html(output);
return this;
}
});
but #vahan is right and you don't need to overwrite the render method usually, just have the template and model variable set and marionette will take care of it

Answer 3

I changed the model - implementation like this, it works for me.
initialize : function (arg) {
this.model = arg.model; //it works!
}
instead of :
initialize : function (model) {
this.model = model; //i am not directly got the model here..?
}