Backbone model.save() overwrite previous model

Question

I have a problem when i save my model. Instead to create a new model with new cdi i always get the same cd1 and seems my model are just overwrite the previous.

Here is my simple sign up form:

Html

<form class="form-signin">
      <h2 class="form-signin-heading">Please sign in</h2>
      <label for="inputName" class="sr-only">Name</label>
      <input type="text" id="inputName" class="form-control" placeholder="Name" required autofocus>
      <label for="inputSurname" class="sr-only">Surname</label>
      <input type="text" id="inputSurname" class="form-control" placeholder="Surname" required autofocus>
      <label for="inputNickname" class="sr-only">Nickname</label>
      <input type="text" id="inputNickname" class="form-control" placeholder="Nickname" required autofocus>
      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <span id="btn-submit" class="btn btn-lg btn-primary btn-block" type="submit"> Sign in </span>
    </form>

Model:

var User = Backbone.Model.extend({
defaults: {
    inputName: "",
    inputSurname: "",
    inputNickname: "",
    inputEmail: "",
    inputPassword: "",
    rememberMe: false
},
url: 'src/users.json'

});

View:

var SignupView = Backbone.View.extend({

events: {
    'keypress input': 'getInputs',
    'click #btn-submit': 'saveInputs'
},

initialize: function() {
    // Make sure functions are called in the right scope
    _.bindAll(this, 'saveInputs');

    // Listen to model changes
    // this.model.bind('change', this.edit)
},

getUser: function(cid) {
    return this.model
},

saveInputs: function(evt) {
    evt.preventDefault();

    var model = this.model;

    this.$el.find('input[id]').each(function() {
        model.set( this.id, this.value );
    });
    this.model.save();
    console.log(model);

    this.$el.find('input').each(function() {
        this.value = ""
    });
}

});

Collection:

   var Searchers = Backbone.Collection.extend({
    model: User
});

And my app.js

 var SignUp = Backbone.View.extend({
    el: '.container'
});

var userModel = new User();
var searchersCollection = new Searchers();
searchersCollection.bind('change', function(rec){
    console.log('A record was changed:' + rec);
});


var signupView = new SignupView({
    el: $(".form-signin"),
    model: userModel
});

var signup = new SignUp();

So if a user type his data in the form and then i chekc in the web console:

userModel

child {cid: "c1", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}

but if new user type in new data and i check again web console:

userModel

child {cid: "c1", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}

I got the same cid, i have just one model in my userModel and attributes are the last introduced. What i need instead is to save all my users, not ovewrite them, and be able to access to them.. throught my model i guess?

I can't understand where i'm wrong :/

Answer 1

cid means ClientID and is assigned when model object is created. U should use "idAttribute" to define the remote id field.

Answer 2

From what I understood what you need is a collection, not a model.

A model stands for a single entity, like a book, or a user. The save method of a model is for syncing it's data with the persistance layer and updating itself with the data return from it

A collection is a collection of models. If you want a new model with different cid everytime the user saves the form, you should add it to a collection, backbone will initialize a new instance of the model specified in collection's model property and add it to the collection.

Since you have an array of user entities, you should be pointing a collection to users.json , not a model.

var Searchers = Backbone.Collection.extend({
    url: 'src/users.json',
    model: User
});

And instead of a single model, you should pass a collection for that type of models:

var signupView = new SignupView({
  el: $(".form-signin"),
  collection: searchersCollection
});

And in the save method pass the data that should be added as a new model to collections add method:

saveInputs: function(evt) {
  evt.preventDefault();
  this.collection.add({
    name: "",
    age: ""
  });
}

---

Also note that you need to call the fetch method so that the collection will be populated from the endpoint.

I suggest going through the documentation and tutorials since it seems you still needs to understand the basics.