当表单是木偶布局视图时，序列化表单数据

Serializing form data when form is a marionette layout view

本文关键字：表单 数据 视图 序列化 布局      更新时间：2023-09-26

我有一个像这样的对象:

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

我想在一个木偶应用程序中编辑这些数据。我定义了:

  • 是最外层对象的主干模型，我们叫它Server
  • 端点的骨干模型
  • 服务器的主干集合
  • 端点的主干集合

我的目标是有一个允许添加N个端点的表单，这样当提交表单时，我将持久化整个对象(服务器数据和端点列表)。

要实现这个，我首先重写parse函数来实例化端点集合，如下所示:

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

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

表单按照预期的方式呈现，包含id、name的输入控件，以及对象中尽可能多的端点的重复输入集。

然而，我不清楚序列化应该如何在这种设置下工作。如果我通过破坏其模型来删除端点，则在持久化数据时将删除该端点。但是，如果我更改了任何端点数据，这些更改将被忽略。

在我的表单提交处理程序中，我可以遍历端点，但这些模型不能反映更改后的表单值。

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

我认为在如何最好地处理表单中的重复组方面存在一个根本性的误解。我错过了什么?

我的思想变得紧张起来。布局视图真的不是问题所在。关键是表单需要具有惟一的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
        }
    }
});

然后，在视图模板中，我使用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>

最后，在提交时，Syphon会为我的重复组创建一个对象，而我真正想要的是一个数组，所以我用:

submitClicked: function (e) {
    e.preventDefault();
    var data = Backbone.Syphon.serialize(this);
    // need to convert endpoints object to array
    var endpoints = data.endpoints;
    delete data["endpoints"];
    data.endpoints = [];
    for (var idx in endpoints) {
        data.endpoints.push(endpoints[idx]);
    }
    this.trigger("form:submit", data);
}

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

相关文章：