javascript - Backbone - 使用嵌套 json 数据将表单提交绑定(bind)回模型

Question

我为这个问题绞尽脑汁好几天了，却没有想出一个好的解决方案。

我有以下模型

{
  "id": "123",
  "key1": "foo",
  "key2": "bar",
  "metadata": {
    "height": 1,
    "width": 1  
  },
  "userPrefs": [
     {
       "name":"firstName",
       "displayName":"First name",
       "required":true,
       "dataType":"text",
       "defaultValue":"enter first name",
       "value": ""
     },
     ......
  ]
}

我的 View 使用此模型，特别是 userPrefs，来创建编辑表单。例如，userPrefs 会生成这样的输入

<input type="text" id="firstName" name="firstName" value="" placeholder="enter first name" required />

然后，用户可以输入名字的值 - 例如“约翰”并单击“保存”。在发出 PUT 请求之前，我需要将此表单数据映射回模型。

所以我劫持了提交事件并执行

this.$('form').serializeArray()

这会返回一个键/值对数组，例如

[{"firstName": "John"}]

现在我遇到的问题是如何最好地将这些值映射回模型中正确的 userPref。

我曾考虑过“假设”5 个用户偏好会产生 5 个输入。然后我可以使用带有索引的迭代器来更新正确的 userPref。但正如我们所知，未选中的复选框不会被提交，因此简单的迭代器将无法工作。

然后我尝试获取每个序列化值并循环遍历 userPrefs 以进行匹配。但这仍然会因为上面提到的复选框问题而失败。

有人能找到一个优雅的解决方案吗？

• 我应该使用更好的 json 结构来解决这个问题吗？也许是一个仅包含 userPrefs 的单独模型
• 我如何知道用户是否取消选中了复选框并能够更新我的模型

Answer 1

最后我想出了一个相当简单的解决方案。

var self = this;
var userPrefs = this.model.get('userPrefs');

// loop through the prefs and update one at a time....
_.each(userPrefs, function(pref, index) {       
   var item = self.$('#' + userPrefs[index].name); // userPref DOM item
   if (item[0].type === 'checkbox') {
      userPrefs[index].value = item[0].checked;
   } else {
      userPrefs[index].value = item[0].value;
   }
});

// update the model 
this.model.set('userPrefs', userPrefs);

因为我首先使用每个 userPref 来构建表单，所以我可以循环遍历它们并查询 dom。

然后我可以将该值插入回模型中。

我可以看到它有两个缺点

• 我正在更新模型中的值，无论它是否实际发生变化
• 它对复选框进行硬编码检查

但对于我的用例来说，这是可以接受的。