Javascript 淘汰：不寻常的映射模式

场景：我向服务器请求一个部件。它还给了我这个，它是伪的，但代表了我所看到的：

{
PartNumber : "XYZ", 
Description: "ABCFOO", 
ProductClass: "Widget",
FieldList:[
    {Name: "PROGRAM TYPE", Value: "Program3"},
    {Name: "SHIP", Value: false},
    {Name: "NOTES", Value: "SomeValue1"}
],
MoreStuff : [{
    ...
}]
}

注意元素的FieldList列表，这是这里的重点

服务器也给了我一个特定字段的列表，它们的类型和默认值。看起来是这样的：

[
{FieldName : "PROGRAM TYPE", FieldType: "List", Defaults: [{Name:"Program 1", Value: "Program1"},{Name:"Program 2", Value: "Program2"},{Name:"Program 3", Value: "Program3"}]},
{FieldName : "SHIP", FieldType : "Boolean", Defaults: []},
{FieldName : "NOTES", FieldType: "TextArea", Defaults: []}
]

这是在一个单独的REST调用中实现的，在加载我的部件之前。我使用它为该部件创建HTML页面的一部分。你可以看到，当我要求零件时，它们与字段列表部分有类似的关系

从字段和默认值列表中，我在页面上生成适当的HTML元素。如果它是一个布尔字段类型，我会创建一个复选框——如果它是一个列表，我会创建一个带有默认选项的选择，TextArea是一个文本区域，等等。所有这些都可以正常工作。它最终看起来像：

<input data-bind="textInput: PartNumber"/>
<textarea data-bind="textInput: Description"></textarea>

<!-- generating fieldlist - i create a pseudo attr because the field name can have spaces-->
<select field_label="PROGRAM TYPE">   <!-- how the heck do i bind to this??-->
   <option value="Program1">Program 1</option>
   <option value="Program2">Program 2</option>
   <option value="Program3">Program 3</option>
</select >
<input type="checkbox" field_label="SHIP" value="true"/> <!-- or this, how to bind to it?!-->
<!-- end of field list generation -->

现在我把我得到的对象放到我的ViewModel中，一切都很顺利。我让它变得简单，只需使用ko.mapping.fromJSrest_数据；很好用

数据绑定是ducky——因为我能够绑定它。我的问题来自-我该如何将我的字段列表映射到我为服务器提供给我的字段生成的HTML？。My data/My viewmodel对象中包含FieldList，其中包含我要映射到生成的内容的buncha内容。我拥有的唯一真正的密钥是我自己创建的field_标签，因为服务器的FieldName可以有空格

所以我想我要问的是，我从我的角色那里得到了一系列的字段列表。我的视图模型中有整个Part对象，一切都很好。我如何获取该字段列表并将其映射到另一个对象中我自己生成的字段集，即获取字段列表名称并将其绑定到具有相同值的field_标签的元素

详细说明-类似于：如何将具有程序类型名称的FieldList映射到具有程序类型的field_标签的HTML元素

我开始认为这样的事情可能是我应该走的方向：

---

但这超出了我的想象。

一种方法是：

function Option(definition) {
    this.definition = definition;
    this.value = ko.observable();
    this.templateName = 'input-template-' + definition.FieldType;
}

function ViewModel() {
    var self = this;

    // from REST call
    var fieldDefinition = [{
        FieldName: "PROGRAM TYPE",
        FieldType: "List",
        Defaults: [
            { Name: "Program 1", Value: "Program1" }, 
            { Name: "Program 2", Value: "Program2" }, 
            { Name: "Program 3", Value: "Program3" }
        ]
    }];

    self.options = ko.observableArray();
    // for the sake of the example
    self.options.push(new Option(fieldDefinition[0]));

    // methods    
    self.optionByName = function (name) {
        return ko.utils.arrayFirst(self.options(), function (option) {
            return option.Name = name;
        });
    };

    // poor man's init, imagine 2nd rest call instead
    self.optionByName("PROGRAM TYPE").value("Program3");
}

及

及

根据需要添加更多模板，这应该很容易扩展

---

jsFiddle:

我可能在这里弄错了什么，但是看起来ViewModel是围绕着我生成的第二个JSON的HTML元素的对象包装的，其中ViewModel是围绕着我得到的第一个JSON对象包装的。我读错你的代码了吗？对不起，有点累了，今天很忙。对不起，我很难分析你的评论你看过小提琴了吗？据我所知，它是这样的：1你收到一堆字段定义。2接下来，根据这些定义创建一组输入元素。3您通过Ajax接收一组选定的值，并希望将输入绑定到这些值。这正是我的代码的工作原理。很高兴听到。将默认值放入ViewModel中是不必要的，因为它们应该通过Ajax获取。但我明白你为什么有困难。请参阅这个修改后的Fiddle，它使用Ajax请求来处理部件字段定义和字段。它用处理多个异步请求所需的位扩展了我的答案。强烈推荐阅读：jQuery延迟@Jason和我们正在做的：如何只请求一次定义，但多次请求数据，以及其他一些提示。