How can I add a text box with label name age and view it in the template using backbone.js?

<label> Age</label>
<input type = "text" name = "age" value="12"/>

I want this to be added as an attribute to model and view it in template. Can anyone help? I know the basics of backbone.js.

How can I add a text box with label name age and view it in the template using backbone.js?

<label> Age</label>
<input type = "text" name = "age" value="12"/>

I want this to be added as an attribute to model and view it in template. Can anyone help? I know the basics of backbone.js.

• javascript
• backbone.js

• i got it cleared now am trying to create radio buttons – user2082957 Commented Mar 6, 2013 at 10:07

2 Answers 2

Not sure what you want but here is the basic example:

var App = {};

App.Person = Backbone.Model.extend({});
App.View = Backbone.View.extend({
    el: "#form",
    render: function() {
        var html = _.template($('#form-tpl').html(), this.model.toJSON());
        this.$el.html(html);
    }
});

$(function() {
    var person = new App.Person({
        name: 'Thomas',
        age: 37
    }),
    app = new App.View({model: person});
    app.render();
});

HTML:

<script type="text/template" id="form-tpl">
    <label>Age:</label>
    <input type="text" name="age" value="<%= age %>">
</script>
<div id="form"></div>

http://jsfiddle/CX3ud/

Also there are tons of tutorials available. Good luck!

Templating isn't built-in to Backbone, which means you first have to pick a templating system. There are many good options out there, but personally I prefer Handlebars. You could also choose from Mustache, the (very minimalist) Underscore template function, multiple jQuery plug-ins, etc.

Once you pick a library, you'll generally build/pile a template function with it to generate the HTML. Here's a simple Handlebars example:

var template = Handlebars.pile('<span>Hello {{target}}</span>');

That can (optionally) be done as part of your View code:

 var MyView = Backbone.View.extend({
     template: Handlebars.pile('<span>Hello {{target}}</span>')
 });

Once you have that template function, you typically pass it a value map:

var resultText = template({target: 'World!'});

and get back the rendered result:

resultText == '<span>Hello World!</span>';

You can fit that in to Backbone however you want, but one mon pattern is something like the following:

 var MyView = Backbone.View.extend({
     template: Handlebars.pile('<span>Hello {{target}}</span>'),
     render: function() {
         var valueMap = this.model.toJSON();
         this.$el.html(this.template(valueMap));
     }
 });

 // Usage:
 new MyView({
     el: '#someElement',
     model: new Backbone.Model({target: 'World!'}
 )).render();