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": ""
     },
     ......
  ]
}

我的视图使用此模型，特别是userPrefs来创建编辑表单。因此，例如userPrefs将生成类似的输入

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

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

所以我劫持了提交事件并做了

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

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

[{"firstName": "John"}]

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

我玩弄“假设”5个userPrefs会产生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。

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

我有两个缺点，我可以看到

我正在更新模型中的值，无论它是否已实际更改
它有一个硬编码检查复选框

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

Answer 2

这是我能想到的解决方案。首先，你不应该将简单的JSON作为你的模型，而应该有一个关联（一对多，model to userPrefs）。看看Backbone Associations建立关系。在Backbone Associations上下文中，您需要为外部AssociatedModel和model创建userPref，然后将userPrefs集合添加到外部模型中。（这在Backbone Associations教程中有解释。）

当您从特定edit form模型商店创建userPref时，此模型的id位于表单中的某个位置（隐藏字段或数据属性），以便您以后可以使用它从userPref集合中找到相应的userPrefs模型，并相应地进行更新。

希望这有帮助。

Backbone - 使用嵌套的json数据将表单提交回模型

2 个答案: