标记

<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中的第一个项目并分配它。原因是当我将其发布到我的网络服务时，我需要确保在那里选择了某些内容。

我是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服务获取数组时，数组绑定正确，只是不确定如何在那里硬编码。目前这两个选项只有两个。

Answer 1

您的空certType问题的根源是由于您的设置不匹配/拼写错误。

 self.addCert = function () {
   self.selectedCert(new Certification(self.availableCertTypes()[0]));
 }

导致最终调用this.certType = ko.observable(new CertType(data));

 var CertType = function (data) {
   this.certTypeId = ko.observable(data.CertTypeId); //expecting uppercase property
   this.certTypeName = ko.observable(data.CertTypeName);
 }

self.availableCertTypes = ko.observableArray([
        {
          "certTypeId": 1, //data-bind and this declaration are both lowercase               
          "certTypeName": "Certification"
        },
        {
          "certTypeId": 2,
          "certTypeName": "Training"
        }
    ]);

修复会产生当前设置的预期结果

"selectedCertType":{"CertTypeId":1,"CertTypeName":"Certification"}

要获得所显示/请求的预期结果，请从选择绑定中删除optionsValue，并将value绑定到所选证书的certType（由{提供） {1}}绑定）

with

结果：

 <select id="CertificationType" 
         data-bind="options: $parent.availableCertTypes, 
                    optionsText: 'CertTypeName', 
                    value: certType"
         style="width:100%;"></select>

考虑：如果要使用现有认证中的数据填充选择，则需要进行一些特殊考虑。看看examples of initialization。

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

标记

视图模型

模型

1 个答案: