使用包含 3 个 IList<CustomType> 的 JSON 对象对 3 个下拉列表进行剔除映射答案

【问题标题】：knockout mapping of 3 dropdown lists using a JSON object containing 3 IList<CustomType>使用包含 3 个 IList<CustomType> 的 JSON 对象对 3 个下拉列表进行剔除映射
【发布时间】：2014-11-26 17:38:34
【问题描述】：

使用 Knockout 我正在尝试将 3 个下拉列表与调用 WebAPI 的 Ajax 方法返回的数据绑定。

接收到的 JSON 数据属于“ReconDefMasters”类型，其中 calsses 定义如下

public class MasterItem
{
    public int MasterItemID { get; set; }
    public string MasterItemName { get; set; }
}


public class ReconDefMasters
    {
        public IList<MasterItem> servFileFormat { get; set; }
        public IList<MasterItem> mersRev { get; set; }
        public IList<MasterItem> mersFileType { get; set; }
}

如何为此编写 ko.mapping ？

我可以通过返回 IList 来实现结果，但是它需要对 WebAPI 进行 3 次单独调用，并通过返回 3 个 IList 的复合对象来尝试避免这种多次调用。

我参考了以下链接，但没有成功修改 3 个下拉列表的逻辑

http://jsfiddle.net/jearles/CGh9b/

Poblem with getting multidimensional array (object) observable in KnockoutJS

这是我的单一 IList 方法的代码

var apipath = 'http://example.com';

ko.validation.init({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: false
});

function Master(data) {
    var self = this;
    self.FormatId = ko.observable(data.MasterItemID);
    self.FormatName = ko.observable(data.MasterItemName);
}

var RuleDefVM = function (url) {
    var self = this;

    self.ServFileFormat = ko.observableArray();
    self.selectedTemplate = ko.observable();


    self.RuleDef = function () {

        jQuery.support.cors = true;

        $.ajax({ 
            type: "GET", 
            url: url, 
            contentType: "application/json; charset=utf-8", 
            dataType: "json", 
            success: function (response) { 
                if (response != "") { 
                    $(response).each(function (index, element) {
                        self.ServFileFormat.push(new Master(element));

                    }); 

                } 
            } 
        });        
    };
}
var urlRuleDef = apipath + '/api/RuleDef/';
var viewModelRuleDef = new RuleDefVM(urlRuleDef);
viewModelRuleDef.RuleDef();

【问题讨论】：

您是在问如何将您的 ReconDefMasters 对象序列化为 JSON，或者如何在客户端处理该 JSON，或两者兼而有之？
如何在客户端处理该 JSON - To Knockout 将其绑定到 3 个下拉列表
您的模型需要有 3 个 observableArrays，每个 List 一个 - 然后您可以在模板等中单独绑定它们
好的，我解决了。谢谢。
随时为您的解决方案添加答案

标签： json knockout.js

【解决方案1】：

function Master(data) {
    var self = this;
    self.FormatId = ko.observable(data.MasterItemID);
    self.FormatName = ko.observable(data.MasterItemName);
}


    selfDef.ServFileFormat = ko.observableArray();
    selfDef.MERSRev = ko.observableArray();
    selfDef.MERSFileType = ko.observableArray();


    self.selectedTemplate1 = ko.observable();
    self.selectedTemplate2 = ko.observable();
    self.selectedTemplate3 = ko.observable();


        jQuery.support.cors = true;
        $.ajax({
            url: url,
            type: "GET",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            cache: false,
            success: function (response) {
                if (response != "") {
                    $(response).each(function (index, element) {
                        $(element.servFileFormat).each(function (index,element) {
                            selfDef.ServFileFormat.push(new Master(element));
                        });
                        $(element.mersRev).each(function (index, element) {
                            selfDef.MERSRev.push(new Master(element));
                        });
                        $(element.mersFileType).each(function (index, element) {
                            selfDef.MERSFileType.push(new Master(element));
                        });

                    });

                }
            }

        });


<select data-bind="options: ServFileFormat, value:selectedTemplate1, optionsText: 'FormatName' "class="dropdown"></select>

 <select data-bind="options: MERSRev, value:selectedTemplate2, optionsText: 'FormatName' "class="dropdown"></select>
<select data-bind="options: MERSFileType, value:selectedTemplate3, optionsText: 'FormatName' "class="dropdown"></select>

【讨论】：