Save table data entirely in backbone.js

Question

I have to save my table of data entirely by POST when clicking a single button.

My table look like this

can you please help me to solve this.I know saving each row in backbone.I think saving entire data is possible by looping,please suggest me if there any other better options.

[Saving a collection](http://stackoverflow.com/a/41042916/1218980) and [how to force a POST request](http://stackoverflow.com/a/41091957/1218980) — Emile Bergeron, Jan 18 '17 at 16:20
You can use data binding libraries to avoid looping. Whether you want to do it, or just add a loop depends on your circumstances which we are totally unaware of. In other words your question can't be answered unless you add lot more details of the implementation, why you want to avoid looping and so on. — T J, Jan 19 '17 at 11:27

score 0 · Answer 1 · answered Jan 19 '17 at 15:40

This should not be a problem as long as your data is in a Backbone.Collection.

Lets say you have this

var PatientCollection = Backbone.Collection.extend({
    // You need to define the url on the collection, 
    // that will be used later in the request
    // This is the endpoint where you want to send the POST request
    url:'/add/your/url/here'
});

var Patients = new PatientCollection([
    { id: '001'
      patient: '001_Patient',
      DOS: '2017-01-18'
    },
    { id: '002'
      patient: '002_Patient',
      DOS: '2017-01-18'
    }
]);

Backbone.Sync('create', Patients);

So what happens here is that Backbone will send a POST request ( that's what create parameter serves for ) to the URL that was set previously when creating the PatientCollection constructor and the array as the payload that contains all the models that were in a collection.

That way you send all your data from the collection to the server at once, and no need to loop over the collection.

For more information on Backbone.Sync and how it works check here

Sunil More · Answer 2 · 2017-01-19T16:27:45.953

Hi you can use collection binder for to bind the data .Here is the example

here is the html http://jsfiddle.net/4r8ET/33/

<head>
<!--The templates-->
<script id="htmlTemplate" type="text/template">
    <table>
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody> </tbody>
    </table>
    <input type='button' value='submit' class='save' />
    <div id='result'></div>
</script>

<script id="rowTemplate" type="text/template">
    <tr>
        <td>
            <input type='text' data-name='patient'>
        </td>
        <td>
            <input type='text' data-name='dos'>
        </td>
        <td>
            <input type='text' data-name="m1">
        </td>
    </tr>
</script>
</head>

<body>
 <div id="anchor"></div>
</body>

Here is the javascript code

 var SingleEntry = Backbone.Model.extend({});

 var entry1 = new SingleEntry({"patient":"patient1","dos":"2014-02- 12","m1":1343832975291});
 var entry2 = new SingleEntry({"patient":"patient2","dos":"2014-01-12","m1":1343832975291,});
 var entry3 = new SingleEntry({"patient":"patient3","dos":"2014-03-12","m1":1343832975293,});

 var CollectionOfEntries = Backbone.Collection.extend({
  model: SingleEntry,
  initialize: function(){
   this.models.push(entry1);
   this.models.push(entry2);
   this.models.push(entry3);
  },
});

var View = Backbone.View.extend({
 initialize: function(){
  this.collection = new CollectionOfEntries();
  this.rowHtml = $('#rowTemplate').html();
  this.elHtml = $('#htmlTemplate').html();

  var elManagerFactory = new Backbone.CollectionBinder.ElManagerFactory(this.rowHtml, "data-name");
  this._collectionBinder = new Backbone.CollectionBinder(elManagerFactory);
 },

render: function(){
 this.$el.html(this.elHtml);
 console.debug(this.collection);
 this._collectionBinder.bind(this.collection, this.$el);
 return this;
},

close: function(){
 this._collectionBinder.unbind();
},
saveData:function(event){
 console.log(' save collection',this.collection)
  alert(JSON.stringify(this.collection.toJSON()))
},
events:{
 'click .save':'saveData'
}

});
$(document).ready(function(){
 var view = new View();
 view.render();
 $('#anchor').append(view.el);
 console.debug(view);
});

you've to add these 2 library

https://cdnjs.com/libraries/backbone.modelbinder

Save table data entirely in backbone.js

2 Answers2