Question

我有以下骨干模型

var Page = Backbone.Model.extend({
    defaults: {
        id: null,
        metadata: {
            name: '',
            title: '',
            ...
        },
        children: []
        parent: null
    },
    urlRoot: '/api/page',
    initialize: function () {}
});

当我保存以下表单时，我需要创建此表单的JSON表示并在将其保存到服务器之前更新主干模型。我需要这样做，因为我的表单是动态创建的，因此我无法使用硬编码选择器来查找表单名称。以下是一个示例表单。

<form>
    <label>Name:</label>
    <input type="text" name="metadata.name" value="">
    <label>Title:</label>
    <input type="text" name="metadata.title" value="">
    <label>Slug:</label>
    <input type="text" name="metadata.slug" value="">
    <label>Url:</label>
    <input type="text" name="metadata.url" value="">
    <button type="submit">Save</button>
</form>

基于HTML表单数据更新骨干模型的最有效方法是什么？

修改

我发现this answer here at stackoverflow，使用方括号而不是对象之间的点。我认为这种技术效果很好，但也许有类似的方法使用点表示法序列化表单？

Answer 1

我最终使用this整洁的小库将表单转换为JavaScript对象

Answer 2

了解您的想法，我只需删除Model默认值并保留始终存在的字段（或删除它的句号）。这些字段此时未知，因此在您的案例场景中设置默认值并不理想。从技术上讲，Model只能更新到您希望它的任何字段，并将适应您从服务器提供的任何字段。

关键阶段是最初设置Model，因为这决定了Model中包含哪些属性。由于您提到表单是动态创建的，因此您可以通过JSON对象创建Model，该对象表示与您正在呈现的表单一起的数据。

当需要将其保存回服务器时，Model将具有进行更新所需的所有属性。这是第一种方式。

model.save();

或者，您可以在保存更改时将Form整体序列化。基本上，在运行时创建一个新的Model。

var form= $('#myForm'); 
var data = JSON.stringify(form.serializeArray());

/**Create a new instance of the Model then and perform an update. */
var model = new MyModel(data);
model.save();

使用嵌套对象创建复杂表单的JSON表示并更新主干模型

2 个答案: