Backbone Login Screen

Question

I am fairly new to BackboneJS. After writing multiple GET implementation, I am trying to implement Login screen with Backbone JS.

Folder Structure
app
-->model
-->view
-->templates
-->server

formSignIn.html

<form class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" id="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" id="password" class="form-control" placeholder="Password" required="">
<label class="checkbox">
  <input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>

Backbone View

var SignInView = Backbone.View.extend({
    el:$('.container'),
    template:_.template('../templates/formSignIn.html'),
    events: {
        "click .btn":"signIn"
    },
    initialize: function() {
        this.model.on('change', this.render, this); 
    },
    render: function() {
        var attributes = this.model.toJSON();
        this.$el.html(this.template(attributes));
    },
    signIn: function() {
      this.model.signIn({
        email: $('#email').val(),
        password: $('#password').val()
      });
    }
});
var signInView = new SignInView({model: signInModel});
signInView.render();

Backbone Model

var SignInModel = Backbone.Model.extend({
    url:function() {
        'http://localhost:3000/singIn'
    },
    defaults: {
        email:"",
        password:""
    },
    parse: function(resp) {
        return resp;
    },
    signIn: function() {
        this.save();
    }
});
var signInModel = new SignInModel();

Issues:

1. Template HTML is not rendering. When I open the page it shows ../templates/formSignIn.html. It means _template is not recognizing the html.

2. How is the view and model implementation? Is this the right way of doing? I am not very confident about calling the model's save().

Answer 1

In answer to your first question _.template(...) takes in a string. If you want the contents of ../templates/formSignIn.html you must include it in the dom or request it, for example using ajax.

If included in the dom it would look something it like this:

// Somewhere in the html...
<script type="text/html" id="form-signin-tpl">
  <form class="form-signin" role="form">
    ...
  </form>
</script>

// in your view
_.template($('#form-signin-tpl').html());

If you need to request the template during runtime you can use RequireJS which handles this nicely, or you could manually request it with jQuery, perhaps like this:

$.get( "path/to/templates/formSignIn.html", function( html ) {
  var tpl = _.template(html);
});

---

In answer to the second question

1. the model's url parameter is a string, not a function.
2. You only need to define parse if you need to customize how the server's data is parsed.

This is probably more what you're going for:

var SignInModel = Backbone.Model.extend({
    url: 'http://localhost:3000/singIn',
    defaults: {
      email:"",
      password:""
    },
    signIn: function() {
      this.save();
    }
});
var signInModel = new SignInModel();

---

Lastly, regarding authenticating a user, a model might not be the best way to handle this. There are a few SO questions regarding athenticating a user in Backbone apps, such as this one