使用Knockout在ViewModel上创建和更新

Question

HTML

<input type="button" id="addNewCert" value="Add New Certification" class="btn btn-primary" data-bind="click: addCert"/>
<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><input type="button" class="btn" value="Edit" data-bind="click: $parent.editCert" /></td>
            <td data-bind="text: certName"></td>
            <td data-bind="text: certCode"></td>
            <td data-bind="text: description"></td>
            <td data-bind="text: 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>
        </div>
    </div>
</div>

模型

var Certification = function(data) {
    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.certTypeId = ko.observable(data.CertTypeId);
    this.certTypeName = ko.observable(data.CertTypeName);
    this.isEditing = ko.observable(false);
}

视图模型

var certViewModel = function (certs) {

    //Data
    var self = this;
    self.certs = ko.observableArray([]);
    self.editingCert = ko.observable(false);
    self.selectedCert = ko.observable();
    self.availableCertTypes = ko.observableArray([]);
    self.selectedCertType = ko.observable();

    self.editCert = function (cert) {
        self.editingCert(true);
        self.selectedCertType(cert.certTypeId());
        self.selectedCert(cert);
    }

    //Operations
    self.addCert = function () {
        self.selectedCert(new Certification());
    };

    self.removeCert = function (cert) {
        self.certs.remove(cert);
    };

    self.save = function () {

    };
}

我有一个使用编辑按钮构建的网格，用于获取认证列表，单击编辑按钮时，with绑定工作正常，并向我显示正确信息以及正确选择的选项。 <select>代码。

问题

但是现在我不确定的是，如何让按钮位于最顶层，以及＃34;添加新认证＆＃34;，生成认证模型的空白实例，显示相同＆＃34;编辑＆＃34;区域？

我找到了很多关于＆＃34; inline＆＃34;的编辑的例子。绑定和编辑，但这并不是我真正想要的，因为我试图了解Knockout和WebAPI的一些细节，看看我是否可以建立更多的客户端和一些基于WebForms的模块的AJAX驱动版本。

Answer 1

运行代码会产生错误，因为构建模型时数据未定义。它也可能已被省略，但我在这里看不到applyBindings。

这是一个使用它的JSFiddle：

http://jsfiddle.net/jzhh3/

唯一的变化是：

self.selectedCert(new Certification());

更改为

self.selectedCert(new Certification({}));

添加ko.applyBindings(certViewModel);

Answer 2

您需要能够在不传递现有资格的情况下调用new Certification()，因此在您的构造函数中，检查数据是否为空。

http://jsfiddle.net/QG3UZ/1/

var Certification = function(data) {
  this.certId = ko.observable(data ? data.CertificationId : null);
  this.certName = ko.observable(data ? data.CertificationName : null);
  this.certCode = ko.observable(data ? data.CertificationCode : null);
  this.description = ko.observable(data ? data.Description : null);
  this.certTypeId = ko.observable(data ? data.CertTypeId : null);
  this.certTypeName = ko.observable(data ? data.CertTypeName : null);
  this.isEditing = ko.observable(data ? false : true);
}