Template is not working in Backbone.js

Question

I just started working in Backbone.js

In that I created a simple example of showing the values in the template using the underscore.js

Now I want to create some advanced example of showing the values of a user in the template using the model thing

enter image description here

Now my model is (EditProfileModel.js):

window.EditProfileModel = Backbone.Model.extend({

constructor : function(attributes, options) {
    Backbone.Model.apply(this, arguments);
},
defaults : {
    id : '',
    firstName : '',
    lastName : '',
},
urlRoot: 'rest/editProfile'
});

EditProfileView.js :

window.EditProfileView = Backbone.View.extend({

template : 'tpl/EditProfileTpl.html',
el: content,

initialize:function () {
    this.render();
},

events: {

},

render:function () {
    var $this = this;

    var editProfileModel = new EditProfileModel({   
        id:this.model.get('id')
    });

    //GET editProfile/id
    editProfileModel.fetch({
        success : function(model){
            //console.log("I am fetch " + JSON.stringify(model));

            TemplateManager.get($this.template, function(template){

                console.log($(template).html());
                var html = _.template($(template).html(),{user : model});

                $this.$el.html(html);


                return $this;
            });
        }
    });
},

});

and main.js with router thing is:

.....
routes : {
    "profile/:id" : "editProfile"
},

editProfile : function(id){

    var $this = this;

    $this.model = new EditProfileModel({
        id:id
    });

    $('#content').html(
        new EditProfileView({
            model: $this.model
        })
    );
}


......

TemplateManager is just a javascript code that fetches the template on demand and stores it in the array and send the same template back if requested second time from its memory.(I got its code here)

But its showing like this : enter image description here

(see the textbox value it should be admin as it is returned from the server)

Please help me, this is really wierd..................

:(

this is the html that is coming from the server (template):::

<div>
    <form id="frmEditProfile" class="form-horizontal">

        <div class="control-group">
            <label class="control-label" for="firstName">FirstName</label>
            <div class="controls">
                <input id="firstName" name="firstName" placeholder="firstName" value="&lt;%=model.get('firstName')%&gt;" autofocus="autofocus">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="lastName">LastName</label>
            <div class="controls">
                <input type="text" id="lastName" name="lastName" placeholder="lastName">
            </div>
        </div>
        <input type="hidden" name="id" value="">
        <div class="control-group">
            <div class="controls">
                <button class="btn btn-primary" id="btnSave" type="submit">
                    <i class="icon-ok"></i> Save
                </button>
            </div>
        </div>
    </form>
</div>

Have you tried decoding the HTML template before injecting the model into it? — Dennis Rongo
– Dennis Rongo, Commented Mar 1, 2013 at 6:52

Greg · Accepted Answer · 2013-02-27 10:58:20Z

1

TemplateManager ? Did you see that in the link you post, Derrick mentions it was a bad idea ?

Anyway: you logged the $template.html(), you just need to log the model, then you should be able to see what is wrong in the console.

answered Feb 27, 2013 at 10:58

Greg

3,5783 gold badges20 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Greg Over a year ago

what is the value of $template.html(), what is the one of model ?

Ankur Verma Over a year ago

please see the edited part of the question I appended the code of the template as well in the question

Greg Over a year ago

I cannot see any Underscore delimiters in your template. Look, this is how to use it: _.template('Hello <%= user.name %>', {user: {name: 'Doe', nick: 'John'}}). More info here. So check both your template and the data you send to it.

Dennis Rongo · Accepted Answer · 2013-03-01 23:55:43Z

0

Try decoding the HTML entities that comes back from your TemplateManager.

var data = model.toJSON();
var tmpl = $("<div />").html($(template).html()).text();
var html = _.template(tmpl, {firstName: data.firstName});

Also change your template to this:

<input id="firstName" name="firstName" placeholder="firstName" 
    value="<%= firstName %>" autofocus="autofocus">...

edited Mar 1, 2013 at 23:55

answered Mar 1, 2013 at 7:03

Dennis Rongo

4,6111 gold badge28 silver badges26 bronze badges

2 Comments

Ankur Verma Over a year ago

Actually I just printed the model that is in the callback of fetch and found that it has some other things as well, may be that is a part of backbone, when I created the basic model with those 3 variables(firstName,lastName,id ie used in template) I got the thing but I am not understanding the difference

Dennis Rongo Over a year ago

OK, see my modified answer. Remove the model.get('firstName') implementation from your template since that's not how template works.

Collectives™ on Stack Overflow

Template is not working in Backbone.js

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related