将下拉列表中的默认选择分配给另一个模型中的模型类

这是一些相关的代码

标记

<div class="well">
    <input type="button" id="addNewCert" value="Add New Certification" class="btn btn-primary" data-bind="click: addCert"/>
</div>
<table class="table table-striped">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Code</th>
            <th>Description</th>
            <th>Type</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: certs">
        <tr>
            <td><a href="#editCert" data-bind="click: $parent.editCert">Edit</a></td>
            <td><a href="#deleteCert" data-bind="click: $parent.removeCert">Delete</a></td>
            <td data-bind="text: certName"></td>
            <td data-bind="text: certCode"></td>
            <td data-bind="text: description"></td>
            <td data-bind="text: certType.certTypeName"></td>
        </tr>
    </tbody>
</table>
    <div id="selectedCert" data-bind="with: selectedCert">
        <div class="well">
            <div class="row-fluid">
                <div class="span6">
                        <div class="control-group">
                            <h6>Certification Name</h6>
                            <input type="text" id="CertificationName" data-bind="value: certName" style="width:100%;" />
                        </div>
                        <div class="control-group">
                            <h6>Certification Code</h6>
                            <input type="text" id="CertificationCode" data-bind="value: certCode" style="width:50%;" />
                        </div>
                        <div class="control-group">
                            <h6>Description</h6>
                            <textarea ID="Description" data-bind="value: description" style="height:250px;width:480px;"></textarea>
                        </div>
                        <div class="control-group">
                            <h6>Certification Type</h6>
                            <select id="CertificationType" data-bind="options: $parent.availableCertTypes, optionsText: 'certTypeName', optionsValue: 'certTypeId', value: $parent.selectedCertType" style="width:100%;"></select>
                        </div>
                        <div class="control-group">
                            <button class="btn btn-primary" data-bind="click: $parent.save">Save</button>
                            <button class="btn" data-bind="click: $parent.cancel">Cancel</button>
                        </div>
                </div>
            </div>
        </div>
    </div>

视图模型

//Bound to a dropdown and populated by an ajax call listed below
self.availableCertTypes = ko.observableArray([]);
self.selectedCert = ko.observable();
self.addCert = function () {
    self.selectedCert(new Certification({});
    //This line doesn't work :( 
    //self.selectedCert(new Certification(self.availableCertTypes()[0]));
};
//Populates availableCertTypes
    $.getJSON(sf.getServiceRoot('InCertModule') + 'InCert/GetCertTypesByPortal', function (data) {
        //Could call 'self.Certs(self.MapItems(data))' here as that would take the fetched data and populate the viewModel's list of certifications used for binding
        var mappedCertTypes = $.map(data, function (item) {
            return new CertType(item);
        });
        self.availableCertTypes(mappedCertTypes);
    });

模型

var Certification = function (data) {
    if (!data) {
        //If there is no data, pass an empty intialized object, otherwise get an undefined reference
        data = {};
    } else {
        this.certId = ko.observable(data.CertificationId);
        this.certName = ko.observable(data.CertificationName);
        this.certCode = ko.observable(data.CertificationCode);
        this.description = ko.observable(data.Description);
        this.certType = ko.observable(new CertType(data));
        //this.certTypeId = ko.observable(data.CertTypeId);
        //this.certTypeName = ko.observable(data.CertTypeName);
        this.isEditing = ko.observable(false);
        this.isValid = ko.observable(true);
    }
}
var CertType = function (data) {
    this.certTypeId = ko.observable(data.CertTypeId);
    this.certTypeName = ko.observable(data.CertTypeName);
}

我还有一个带有with绑定的编辑功能。这工作正常，并使我的 CertType 模型正确嵌套，如下所示

  "selectedCert": {
    "certId": 10,
    "certName": "AFC Service Training",
    "certCode": "AFCST",
    "description": "The training required to work AFC service",
    "certType": {
      "certTypeId": 1,
      "certTypeName": "Certification"
    },
    "isEditing": false,
    "isValid": true
  },

但是，我已经为我的addCert函数尝试了一些组合，以获取availableCertTypes ObservableArray中的第一项并分配它。原因是当我将其发布到我的 Web 服务时，我需要确保在那里选择了某些内容。

我是 Knockout 的新手.js所以甚至不确定有什么可能或如何真正完成它，但理想情况下，当我打电话给addCert时，我希望看到类似的东西

"selectedCert": {
    //The first item in the observable array 
    "certType": {
      "certTypeId": 1,
      "certTypeName": "Certification"
    },
    "isEditing": false,
    "isValid": true
  }

但相反，我最终与

"selectedCert": {
    "certType": {},
    "isEditing": false,
    "isValid": true
  }

如果我需要发布更多代码，请告诉我。任何帮助将不胜感激。

编辑 这是一个带有大部分标记的 jsFiddle，尽管它不起作用？ http://jsfiddle.net/jtCrw/1/

从 Web 服务获取时，数组会正确绑定，只是不确定如何对其中的数组进行硬编码。目前，这 2 个是仅有的两个选项。