Javascript 当窗体是木偶布局视图时序列化窗体数据

我有一个像这样的对象：

{
  "id": "someId",
  "name": "some name",
  "endpoints": [
    { "scheme": "http", "host":"localhost", "port":"8080" }
  ]
}

parse: function(response) {
    var data = response;
    if (response.endpoints) {
        data.endpoints = new Entities.EndpointCollection(response.endpoints, {parse: true});            
    }
    return data;
},

我想在木偶应用程序中编辑此数据。我定义了：

• 最外层对象的主干模型，我们称之为服务器
• 端点的主干模型
• 服务器的主干集合
• 端点的主干集合

我的目标是创建一个允许添加N个端点的表单，这样在提交表单时，我将保留整个对象（服务器数据和端点列表）

为了实现这一点，我首先重写了parse函数来实例化Endpoints集合，如下所示：

{
  "id": "someId",
  "name": "some name",
  "endpoints": [
    { "scheme": "http", "host":"localhost", "port":"8080" }
  ]
}

parse: function(response) {
    var data = response;
    if (response.endpoints) {
        data.endpoints = new Entities.EndpointCollection(response.endpoints, {parse: true});            
    }
    return data;
},

然后，我创建了一个LayoutView，其中包含与服务器相关的字段，并包含一个用于端点列表的区域。我的控制器实例化视图并传入服务器模型。我的控制器还实例化CollectionView并传入服务器的endpoints集合

表单使用输入控件按预期呈现id、名称和重复输入集，输入的端点数量与对象中的端点数量相同

但是，我不清楚序列化应该如何使用此设置。如果通过销毁端点的模型来删除端点，则在数据持久化时会删除该端点。但是，如果我更改任何端点数据，这些更改将被忽略

在我的表单提交处理程序中，我可以迭代端点，但这些模型并不反映更改的表单值

submitClicked: function (e) {
    e.preventDefault();
    var data = Backbone.Syphon.serialize(this); // I know this is not enough
    var endpoints = this.model.get("endpoints");
    for (var i = 0; i < endpoints.length; i++) {
        var endpoint = endpoints.models[i];
        alert("got endpoint: " + endpoint.get("host"));
    }
    this.trigger("form:submit", data);
},

submitClicked:函数（e）{
e、 预防默认值（）；
var data=Backbone.Syphon.serialize（this）；//我知道这还不够
var endpoints=this.model.get（“端点”）；
对于（变量i=0；i

---

我假设对于如何最好地处理表单中的重复组存在根本性的误解。我错过了什么？

我的思想变得紧张起来。布局视图实际上不是问题所在。关键是表单需要具有唯一的ID/名称。为此，我首先将项目的索引发送到视图：

Views.Endpoint = Marionette.ItemView.extend({
    template: endpointTpl,

    triggers: {
        "click button.btn-remove": "endpoint:remove"
    },

    initialize: function(options) {
        this.model.set("idx", options.childIndex);
    }

});

Views.Endpoints = Marionette.CollectionView.extend({
    childView: Views.Endpoint,
    childViewOptions: function(model, index) {
        return {
            childIndex: index
        }
    }
});

然后，在视图的模板中，我使用该索引属性设置ID和名称：

<tr>
  <td><label for="endpoints[<%- idx %>][scheme]" class="control-label">Scheme:</label></td>
  <td><input id="endpoints[<%- idx %>][scheme]" name="endpoints[<%- idx %>][scheme]" type="text" value="<%= scheme %>"></input></td>
  <td></td>
</tr>

现在，我可以根据需要添加/删除/编辑端点，并将它们适当地保存回对象