Models

var Model = Backbone.Model.extend({
    initialize: function() {},
    getView: function(options) {
        if (!this.hasOwnProperty("view")) {
            options.model = this;
            this.view = new ModelView(options);
        }
        return this.view;
    }
});

var Collection = Backbone.Collection.extend({
    model: Model,
    collectionName: 'endpointname',
    url: '/api/endpointname',
    initialize: function() {
    },
    load: function(options, success) {
        if(!options) {
            options = {};
        }
        this.fetch({data: options, add: true, success: function(collection, response){
                if(success) {
                    success();
                }
            },
            error: function(collection, response){
            }
        });
    },
    getView: function(options) {
        var self = this;
        if (!options) options = {};
        if (!this.hasOwnProperty("view")) {
            options.collection = this;
            this.view = new ListView(options);
        }
        return this.view;
    },
});

var ListView = Backbone.View.extend({
  tag: "span",
  className: "list",
  initialize: function() {
      var self = this;
      this.collection.on("add", function(m) {
          self.appendModel(m);
      });
  },
  render: function() {
      var self = this;
      this.$ul = $("<ul></ul>");
      this.collection.each(function(m, i, c) {
          self.appendModel(m);
      });
      this.$el.append(this.$ul);
      this.setElement(this.$el);
      return this;
  },
  events: {},
  appendModel: function(m) {
      var $el = m.getView({
          list: this
      }).render().$el;
      this.$ul.append($el);
  }
});

var ModelView = Backbone.View.extend({
  tagName: "div",
  className: "item",
  initialize: function() {
  },
  render: function() {
    this.$el.html('I am a model! - ');
    this.$el.append(this.model.get('title'));
  }
});

var FormView = Backbone.View.extend({
  tagName: "div",
  className: "item",
  initialize: function() {
    var self = this;
    if(this.model && this.model.id) {
        this.$el.attr('data-id', this.model.id);
    } else {
        if(!this.model) {
            this.model = new Model({}, {
                collection: this.collection
            });
        }
    }

    this.$inputTitle = $('<input type="text" name="title" placeholder="a title" />');

    this.$form = $('<form class="feature"><fieldset></fieldset><controls></controls></form>');
    this.$form.find('fieldset').append(this.$inputTitle);
    this.$form.find('controls').append('<input type="submit" value="Save" />');
  },
  render: function() {
    var self = this;
    if(this.$el.find('form').length === 0) {
        this.$el.append(this.$form);
    }
    if(this.model) {
        if(this.model.has('title')) {
            this.$inputTitle.val(this.model.get('title'));
        }
    }
    this.setElement(this.$el);
    return this;
  },
  events: {
    "submit form": "submit",
  },
  submit: function() {
    var self = this;
    var setDoc = {};
    var title = this.$inputTitle.val();
    if(title !== '' && title !== this.model.get('title')) {
        setDoc.title = title;
    }
    this.model.set(setDoc, {silent: true});
    var saveModel = this.model.save(null, {
        silent: false ,
        wait: true
    });
    if(saveModel) {
        saveModel.done(function() {
            self.trigger("saved", self.model);
            self.collection.add(self.model);
        });
    } else {
        self.trigger("saved", self.model);
    }
    return false;
  },
});

usage

this.collection = new Collection();
this.form = new FormView({collection: this.collection});
this.form.on('saved', function(){
    self.$el.removeClass('editing');
    self.form.$el.remove();
});
this.$el.append(this.form.render().$el);