Disappearing (or reinstantiating?) view in backbone - backbone.js

Question

I'm been studying Java at school but decided to try JavaScript and have been applying for a JavaScript bootcamp. I've spent a lot of time studying JavaScript to complete the application but never before have I experienced something so mind-bendingly, make-me-want-to-give-up-on-being-a-programmer frustrating as learning Backbone.js.
I have struggled for hours and hours to make a simple program but right now when I fill in information and click submit it creates multiple copies of the el on the page with the entered info, then disappears. I have no idea why either is happening except that the "view instantiated" console log I put in displays both then starting the program and when I click submit.
The relevant html:
<container class="app">
<form id="userInfo">
<table>
<tr><td>First name:</td> <td><input type="text" id="firstName" required></td></tr>
<tr><td>Last name:</td> <td><input type="text" id="lastName" ></td></tr>
<tr><td>E-mail:</td> <td><input type="email" id="email"></td></tr>
<tr><td><button class="addUser" type="submit">add user</button></td></tr>
</table>
</form>
<span class="users"></span>
</container>
The model:
var User = Backbone.Model.extend({
defaults: function(){
return {
firstName: 'test',
lastName: '',
email: ''
}
}
});
The view:
var UserView = Backbone.View.extend({
template: _.template( "<div class='item'>First name: <%= firstName %><br>Last name: <%= lastName %> <br>E-mail: <%= email %><br><button class='delete' type='submit'>delete user</button><button class='edit' type='submit'>edit</button></div>"),
el: '.app',
initialize: function(){
console.log("view instantiated");
_.bindAll(this, 'render', 'createUser');
this.model.on('change', this.render);
},
events: {
'submit form': 'createUser',
'click .delete': 'deleteUser',
'click .edit': 'editUser'
},
render: function(){
$('.users').append(this.template(this.model.toJSON()));
console.log("changed to " + this.template(this.model.toJSON()));
return this;
},
createUser : function(){
alert("adding user");
this.model.set({'firstName': $("#firstName").val()});
this.model.set({'lastName': $("#lastName").val()});
this.model.set({'email': $("#email").val()});
this.render();
},
deleteUser: function(e){
alert('delete user');
},
editUser: function(e){
alert('edit user');
},
});
var user = new User;
var userView = new UserView({model: user});
There is still a lot of functionality I have to put in this before it's done. Any help would be greatly appreciated. Describing this project as Sisyphian is an understatement.
Edit: Okay, to clarify, I want to create a system where someone can enter a first/last name and email to create a user, have a box with that information show up on screen. So far that part is finished, except several boxes are created when you click submit and then they all minimize. Eventually the you will be able to create multiple users and edit or delete them. This user information doesn't connect with anything, just lives in the browser.

Answer 1

As you mentioned there are 2 issues lets us tackle them one by one.
First issue : multiple copies of el on the page with entered info.
In intialize method, you have registered for 'change' event on the model, which means any attribute of model changes it calls the render method.
this.model.on('change', this.render);
In render method, the template is inflated and appended to '.users' element.
$('.users').append(this.template(this.model.toJSON()));
The createUser method is called, whenever form is submitted. In this method, set method is called 3 times, which will trigger the model 'change' event 3 times, which will result in render method being called 3 times. Additionally the render method is called explicitly. Thus 4 copies of el appear on the page.
createUser : function(){
alert("adding user");
this.model.set({'firstName': $("#firstName").val()});
this.model.set({'lastName': $("#lastName").val()});
this.model.set({'email': $("#email").val()});
this.render();
},
To overcome this issue, remove on change event registration from initialize method.
Second issue: then disappears
It is happening due to form submission. To avoid that you need to call preventDefault method on the event. Update creaUser code as shown below:
createUser : function(event){
event.preventDefault();
//Rest of your code can come here
},

Answer 2

In Javascript your object constructors are functions which must be called, so when you do:
var user = new User;
You are not actually creating a new user. Instead, you are copying all of the attributes and methods of your constructor function into user, effectively creating a new symbol for the same constructor function.
In order to create a new user, therefore, you would have to do this:
var user = new User();
If you have some arguments you wanted to pass in, you could do so:
var user = new User({'first name': 'Jimbo', 'last name': 'Uncleperson'});
You don't usually set up defaults and return them. Instead, model definitions usually look something like:
var User = Backbone.Model.extend({
defaults: {
firstName: 'test',
lastName: '',
email: ''
},
someMethod: function () { // here we can define some other functionality
console.log(this.firstName);
}
});
The defaults are used for any values that are not supplied.
After that, when you pass your user object to your view, it should be able to operate on it:
var userView = new UserView({model: user});