Question

单击一个按钮时，我必须完全通过POST保存我的数据表。

我的桌子看起来像这样

请你帮我解决这个问题。我知道保存骨干中的每一行。我认为通过循环可以保存整个数据，如果还有其他更好的选择，请建议我。

Answer 1

只要您的数据位于Backbone.Collection中，这不应该是一个问题。

让我们说你有这个

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);

所以这里发生的事情是Backbone会向创建PatientCollection之前设置的POST发送create请求（URL参数用于）models构造函数和数组作为包含集合中所有{{1}}的有效内容。

这样，您可以立即将所有数据从集合发送到服务器，而无需循环遍历集合。

有关Backbone.Sync及其工作原理的更多信息，请检查here

Answer 2

您可以使用集合绑定器来绑定数据。这是示例

这是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>

这是javascript代码

 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);
});

你要添加这两个库

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

将表数据完全保存在backbone.js中

2 个答案: