Backbone.js dynamic table

I have been trying to learn backbone.js and I thought the best way to learn it is by writing a dynamic table (i.e. add, edit and delete rows of data). I am very familiar with Node.js (back-end). Any comments or suggestions to improve this backbone.js code would be appreciated. This code works fine but I did not use any existing code. I wrote everything by myself so I am not sure whether I am on the right track or not.

```
$(function() {
var UserModel = Backbone.Model.extend({
"urlRoot": "/users",
"id": "id",
"defaults": function() {
// generate a random number and convert it to base 36
return {
"id": md5(Math.random().toString(36).substr(2)),
"name": "Name",
"age": 18,
"email": "example@example.example"
};
}
});

var UserView = Backbone.View.extend({
"templateView": _.template("\
\
\
\
\
\
\
\
\
\
\
\
>delete\
>edit\
\
\
"),
"templateEdit": _.template("\
\
\
\
\
×\
\
\
\
\
\
Name:\
name='name'>\
\
\
Age:\
name='age'>\
\
\
Email:\
name='email'>\
\
Submit\
\

As this question was asked nearly four years ago it is likely the case that you have learned more about JavaScript since then and/or changed this code. Nonetheless perhaps the info below will help you and/or somebody else.

It is interesting that The BackBoneJS documentation uses some valid JSON for specifying the keys of objects but not all. The keys in the original code don't all need to be double quoted - e.g.

var UserModel = Backbone.Model.extend({
    "urlRoot": "/users",
    "id": "id",

could simply be

var UserModel = Backbone.Model.extend({
    urlRoot: "/users",
    id: "id",

There is a lot of duplicate code in the addUser and editUser methods of UsersView. Follow the Don't Repeat Yourself principle by abstracting the common code - perhaps into a method that handles the common functionality and can be called in both places. That way if you need to update something it can be done in one place instead of multiple.

In the UsersView method initialize I see the following:

var self = this;

That is an anti-pattern in Javascript. Instead of using that, use Function.bind() to bind the context, or else use _.bind() or _.bindAll() as is used in other parts of the code.

The block after that line, i.e.

$("#addUser").on("click", function() {

self.addUser();
        });

Can be simplified to

$("#addUser").on("click", this.addUser.bind(this));

This removes the excess function wrapper.

It can also be simplified using the jQuery shorthand method .click():

$("#addUser").click(this.addUser.bind(this));

StackExchange Code Review Q#145483, answer score: 4