Javascript 主干-使用嵌套json数据将表单提交绑定回模型

我已经为这个问题绞尽脑汁好几天了，想不出一个像样的解决办法

我有下面的型号

{
  "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 />

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

[{"firstName": "John"}]

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

我玩弄了“假设”5个userpref将导致5个输入的想法。然后我可以使用一个带索引的迭代器来更新正确的userPref。但正如我们所知，未检查的复选框不会被提交，因此简单的迭代器无法工作

然后，我尝试获取每个序列化的值，并通过userpref循环查找匹配项。但这仍然会与上面提到的复选框问题有关

有人能想出一个优雅的解决办法吗

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

---

以下是我能想到的解决方案。首先，您不应该使用简单的JSON，因为您的模型应该有一个关联（一对多，

model-to-userPrefs

）。看看如何建立关系。在

主干关联

上下文中，您需要为外部

模型

和

userPref

创建一个

关联模型

，然后将

userPrefs

集合添加到外部模型中。（主干关联教程对此进行了解释。）
当您从特定的

userPref

模型创建

edit表单时，请将此模型的
id
存储在表单中的某个位置（隐藏字段或数据属性），以便以后可以使用它从
userPref
集合中查找相应的
userPref
模型，并进行相应更新

希望这能有所帮助。
这是我能想到的解决方案。首先，您不应该使用简单的JSON，因为您的模型应该有一个关联（一对多，
model-to-userPrefs
）。看看如何建立关系。在
主干关联
上下文中，您需要为外部
模型
和
userPref
创建一个
关联模型
，然后将
userPrefs
集合添加到外部模型中。（主干关联教程对此进行了解释。）

当您从特定的
userPref
模型创建
edit表单时，请将此模型的
id
存储在表单中的某个位置（隐藏字段或数据属性），以便以后可以使用它从
userPref
集合中查找相应的
userPref
模型，并进行相应更新

希望这能有所帮助。
最后我想出了一个相当简单的解决方案

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

然后，我可以将该值插入到模型中

我可以看出它有两个缺点


我正在更新模型中的值，而不管它是否已实际更改
它有一个硬编码的复选框

但对于我的用例来说，这是可以接受的。
最后我提出了一个相当简单的解决方案

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

然后，我可以将该值插入到模型中

我可以看出它有两个缺点


我正在更新模型中的值，而不管它是否已实际更改
它有一个硬编码的复选框

但是对于我的用例来说，这是可以接受的。
谢谢您的建议。我喜欢使用嵌套模型和关联来改进体系结构的想法。但是，我不确定它将如何解决将表单数据映射回模型的问题？也许我遗漏了什么？我已经在第二段解释过了。请查看教程，将模型设置回您的
userPrefs
集合。谢谢您的建议。我喜欢使用嵌套模型和关联来改进体系结构的想法。但是，我不确定它将如何解决将表单数据映射回模型的问题？也许我遗漏了什么？我已经在第二段解释过了。请查看教程，将模型设置回您的
userPrefs
集合。