Question

我有一个看起来像这样的对象：

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

我想在Marionette应用程序中编辑此数据。我已定义：

我最外层对象的Backbone Model，我们称之为Server
端点的骨干模型
服务器的Backbone集合
端点的Backbone集合

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

为了实现这一点，我首先覆盖了解析函数以实例化Endpoints集合，如下所示：

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

然后，我创建了一个LayoutView，它包含我的服务器相关字段，并包含我的端点列表的区域。我的Controller实例化视图并传入Server模型。我的Controller还实例化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);
},

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

Answer 1

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

main()

然后，在视图的模板中，我使用该索引属性设置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
        }
    }
});

最后，在提交时，Siphon会为我的重复组创建一个对象，当我真正想要的是一个数组时，我会用：

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

现在，我可以根据需要添加/删除/编辑端点，并相应地保存回对象。

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

1 个答案: