骨干虹吸嵌套属性答案

【问题标题】：Backbone Syphon Nested Attributes骨干虹吸嵌套属性
【发布时间】：2013-10-25 10:38:39
【问题描述】：

我的表单中有以下 HTML...

<input type="text" id="test1" name="steps[description]" value="one step">
<input type="text" id="test2" name="steps[description]" value="two step">

我只是想生成一个像下面的 JSON 这样的对象数组

steps [ {description:"one step"}, {description:"two step"}]

但是，当我 Backbone.Syphon 解析表单时，它总是只在 steps Array 中生成一个值（总是最后出现的具有该名称的输入字段），如下所示

steps [{description:"two step"}]

我的语法有问题还是 Backbone.Syphon 不可能？

【问题讨论】：

请发个jsfiddle

标签： javascript html json backbone.js marionette

【解决方案1】：

尝试用以下方式命名您的输入

<input type="text" id="test1" name="steps[][description]" value="one step">
<input type="text" id="test2" name="steps[][description]" value="two step">

注意额外的[] 使它成为一个实际的对象数组。

【讨论】：

感谢您的回复，我实际上已经尝试过这种语法和其他一些语法。当我调用Backbone.Syphon.serialize(this) 并将序列化结果写入控制台时，我仍然只能将最后一个输入值作为数组中的唯一元素。
我有非常相似的要求，而且这个解决方案不适合我。还有其他方法吗？

【解决方案2】：

也为每个相似的输入添加索引。

<input type="text" id="test1" name="steps[1][description]" value="one step">
<input type="text" id="test2" name="steps[2][description]" value="two step">

在表单提交时，您可以像这样调用 serializeObject 函数：

var data = $('#form' + formId).serializeObject();
this.model.save(data, {
    success : function(model) {
    },
    error : function(model) {
    }
});

您可以使用下面的 serializeObject 函数来解析上述语法。这与stackoverflow question 中解决的相同

$.fn.serializeObject = function() {
        var json, patterns, push_counters, _this = this;
        json = {};
        push_counters = {};
        patterns = {
            validate : /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
            key : /[a-zA-Z0-9_]+|(?=\[\])/g,
            push : /^$/,
            fixed : /^\d+$/,
            named : /^[a-zA-Z0-9_]+$/
        };
        this.build = function(base, key, value) {
            base[key] = value;
            return base;
        };
        this.push_counter = function(key) {
            if(push_counters[key] ===
            void 0) {
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };
        $.each($(this).serializeArray(), function(i, elem) {
            var k, keys, merge, re, reverse_key;
            if(!patterns.validate.test(elem.name)) {
                return;
            }
            keys = elem.name.match(patterns.key);
            merge = elem.value;
            reverse_key = elem.name;
            while(( k = keys.pop()) !==
            void 0) {
                if(patterns.push.test(k)) {
                    re = new RegExp("\\[" + k + "\\]$");
                    reverse_key = reverse_key.replace(re, '');
                    merge = _this.build([], _this.push_counter(reverse_key), merge);
                } else if(patterns.fixed.test(k)) {
                    merge = _this.build([], k, merge);
                } else if(patterns.named.test(k)) {
                    merge = _this.build({}, k, merge);
                }
            }
            return json = $.extend(true, json, merge);
        });
        return json;
    };
})(jQuery);

【讨论】：

感谢您的回复。我们已经使用 Backbone.Syphone 进行解析。因此，为了保持一致性，添加自定义代码不是一种选择。我真的很想有什么方法可以只使用 Backbone.Syphone 来修复它。
Backbone.Syphone 似乎有一个开放的bug 来解决这个问题。我使用给定的函数，它甚至可以解析复杂的对象数组，反之亦然。如果它很简单，而不是使用外部库，那么使用最少的逻辑总是有帮助的。