Question

I am developing a Backbone web application and I want to know that how can post data from the view
This is my Model:

App.Models.edit = Backbone.Model.extend({
    defaults : {
        id    : undefined,
        fname : undefined,
        lname : undefined,
        phone : undefined,
        address : undefined,
        email : undefined,
        url: undefined,
    },

    initialize: function(){
        this.set({url : '../api/getOne/' + App.CurrentID });
    },

    getAttrs: function(attr){
        return this.get(attr);
    }
    });

And this is my view:

App.Views.edit = Backbone.View.extend({
    el: $("#modal"),

    initialize: function(){
        App.TplNames.edit = $('body');
        App.Tpls.edit('edit');
        this.model.bind("reset", this.render, this);
        this.render();
    },

    events: {
        'click .btnSave': 'saveDetails',
    },

    saveDetails: function(){
        this.model.save();
        //console.log(this.model);
    },

    render: function(){
        var elem = '';
        $.each(this.model.models, function(i, k){
        var template = _.template( $('#tpl_edit').html(), k.toJSON() );
        elem += template;
        });
        $(this.el).html(elem);
        $("#myModal").modal('show');
        $("#myModal").on('hidden', function(){
        //alert(123);
        document.location.href = App.Url + '#view';
        });
        var attrs = "";
        $.each(this.model.models, function(i, k){
        attrs = k.toJSON();
        });
        $("#fname").val(attrs.fname);
        $("#lname").val(attrs.lname);
        $("#Email").val(attrs.email);
        $("#Phone").val(attrs.phone);
        $("#Address").val(attrs.address);
        //console.log(attrs);
    }
    });

And it is my Router

App.Router = Backbone.Router.extend({
    routes: {
        ""      :   "def",
        "home"  :   "def",
        "view"  :   "getAll",
        "edit/:id"  :   "edit",
        "add"   :   "addContact",
    },

    def: function(){
        this.mainModel = new App.Collections.Main();
        this.mainView  = new App.Views.Main({model: this.mainModel});
        //this.mainModel.fetch();
    },

    edit: function(id){
        App.CurrentID = id;
        var contactCollObj = new App.Collections.edit();
        viewObj = new App.Views.edit({model: contactCollObj});
        contactCollObj.fetch();
        viewObj.render();
        //console.log(contactCollObj);
    },

    getAll: function(){
        //alert(123);
        var collObj = new App.Collections.View();
        var viewObj = new App.Views.View({model: collObj});
        collObj.fetch();
    },

    addContact: function(){
        //var model = new App.Collections.AddContact();
        model = new App.Models.AddContact();
        var view = new App.Views.AddContact({model: model});
        //view.render();
    }


    });

var app = new App.Router();
Backbone.history.start();

And when I want to save the model, It generates an error:

this.model.save is not a function

Every thing is okay except the above…

Answer 1

In your router you pass collection to App.Collections.edit view as model:

var contactCollObj = new App.Collections.edit();
viewObj = new App.Views.edit({model: contactCollObj});

That is why you cannot call save(). save() is only available for a model not a collection.

You probably want to initialize view with collection

viewObj = new App.Views.edit({collection: contactCollObj});

And then also modify some of your view code accordingly.