javascript - knockout : Unusual Mapping Pattern

Question

场景:我向服务器请求零件。它给了我这个(它是伪造的，但代表了我正在看的东西):

{
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 调用，在加载我的部分之前。我用它来为 Part 创建部分 HTML 页面。当我请求 Part 时，您可以看到它们与 FieldList 部分类似。

根据“字段列表”和默认值——我在页面上生成了适当的 HTML 元素。如果它是一个 bool 字段类型，我创建一个复选框 - 如果它是一个列表，我创建一个 SELECT(使用默认值中给出的选项)，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.fromJS(rest_data); 就可以了。

数据绑定(bind)很笨拙——对于我能够将其绑定(bind)到的内容。我的问题来自 -- 我到底如何将我的 FieldList 映射到我为服务器给我的字段生成的 HTML？。我的数据/我的 viewmodel 对象中有 FieldList，其中有一些我想映射到生成的东西。我唯一真正的“ key ”是我自己创建的 field_label，因为服务器的 FieldName 可以有空格。

所以我想我要问的是，我有我这部分的 FieldList 数组。我的 View 模型中有整个 Part 对象，一切正常。我如何获取该 FieldList 并将其映射到我从另一个对象自行生成的字段集(即，获取 FieldList 名称并将其绑定(bind)到带有 field_label 的元素 相同的值？)

详细说明 - 就像:如何将名称为“PROGRAM TYPE”的 FieldList 映射到 field_label 为“PROGRAM TYPE”的 HTML 元素。

我开始认为这样的事情可能是我应该走的方向: http://jsfiddle.net/MhdZp/128/但这超出了我的理解范围。

Answer 1

解决这个问题的一种方法:

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");
}

和

<script type="text/html" id="input-template-List">
    <label data-bind="text: definition.FieldName"></label>
    <select data-bind="
        value: value,
        options: definition.Defaults,
        optionsText: 'Name',
        optionsValue: 'Value',
        optionsCaption: 'Please select...'
    "></select>
</script>

和

<div data-bind="foreach: options">
  <div data-bind="template: templateName"></div>
</div>

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

jsFiddle:http://jsfiddle.net/0nxt2zte/