Ok let us say I've got a database having a Person table. It's the next fields.

Id (PK, auto-increment) Name (string) Age (int)

I'm able to fetch the server for a listing of individuals so when I render the Backbone Sights it'll have their connected Ids within the model. Great.

Now let us say I've an Add functionality to include a brand new Person. I would have 2 text boxes (one for title, one for age) along with a save button.

After I click save I possibly could use my People Collection from Backbone and include that record towards the collection and it'll also handle (Publish towards the Backbone Collection URL) posting (title, age) to my server.

However the one thing I am lacking the knowledge of may be the Id that's produced in the database place is no more connected using the Backbone Model I simply spun up.

Or perhaps is the concept that after ever "add" I have to fetch again to obtain a fresh list?

I might not have enough information to reply to this based on your question, so I am supposing that you've a view that's been given an assortment instance. Further, I am supposing that the Publish posts the model's characteristics, but returns the model's characteristics back including its recently-designated id.

What exactly for you to do is:

  1. Bind the vista towards the DOM event for whatever triggers the individual save.
  2. Bind the vista towards the collection instance's add (and/or remove occasions).
  3. Inside your Person save event handler, harvest the individual characteristics and initialize a brand new Person model together then save it. Inside your success callback, add the resulting model, which presently has an id in to the collection.
  4. Inside your add event handler, re-render the vista as appropriate.

Here's some code:

PeopleView = Backbone.View.extend({

  events: {
      "submit form#person-form" : "onSave",
      "click .remove-person"    : "onRemovePerson",
  },

  // Presumes you've handed the view a people collection and
  // named it 'collection' to enable backbone.js to auto set it
  // into the view's state.
  initialize: function(options) {
      _.bindAll(this, "onPersonAdded");
      this.collection.bind("add", this.onPersonAdded);
      this.collection.bind("remove", this.onPersonRemoved);
  },

  onSave: function(e) {
      var self = this;
      var person = new Person();
      var person_attrs = this.serialize();  // harvest from your form in this method.
      person.save(person_attrs, {
          success: function(saved_person, data) {
              self.collection.add(saved_person);
          },
          error: function(aborted_person, response) {
              // Error handling as needed.
          }
      });
  },

  onRemovePerson: function(e) {
      e.preventDefault();
      var cid = $(e.target).attr('id');
      var person = this.collection.getByCid(cid);
      person.destroy({
          success: function(removed_person, data) {
              self.collection.remove(removed_person);
          },
          error: function(aborted_person, response) {
              // Error handling as needed.
          }
      });
  },

  onPersonAdded: function(added_person) {
      // perform rendering as needed here.
  },

  onPersonRemoved: function(removed_person) {
      // perform rendering as needed here.
  }

});

Like a stylistic note, you might not want to handle model save code within the view. You can alternatively defer to some controller as well as other appropriate entity.