Question

使用淘汰赛，我有2列资格列表和标记。单击添加按钮后，我要生成新行，然后将（添加）按钮更改为更新按钮。

function Qualification(data) {
var self = this;
self.QualId = ko.observable(data.QualId);
self.QualName = ko.observable(data.QualName);
self.Marks = ko.observable(data.Marks);
}
function QualificationList(data) {
var self = this;
self.QualId = ko.observable(data.QualId);
self.QualName = ko.observable(data.QualName);
}
var QualificationViewModel = function () {
var self = this;
self.Marks = ko.observable();
self.Qualifications = ko.observableArray(Qualification);
self.QualificationLists = ko.observableArray([
    { QualName: 'Master', QualId: '0' },
    { QualName: 'Bachelor', QualId: '1' },
    { QualName: 'CA', QualId: '2' },
    { QualName: 'School Leaving', QualId: '3' }
]);
self.selectedQualName = ko.observable();
self.AddQualification = function () {
    self.Qualifications.push({
        QualList: "",
        QualificationLists: "",
        Marks: "",
        selectedQualName: "",
    });
};
self.SaveQualification = function () {
    console.log(self.Qualifications());
};
};



$(document).ready(function () {
var qualificationViewModel = new QualificationViewModel();
ko.applyBindings(qualificationViewModel);
});

它显示错误：初始化可观察数组时传递的参数必须是数组，为null或未定义。我在“控制台资格”中需要显示“资格名称”，“资格ID和标记”时的预期结果。

Answer 1

错误提示

初始化可观察数组时传递的参数必须是数组，为null或未定义。

而您正在这样做：

self.Qualifications = ko.observableArray(Qualification);

这会将函数传递给可观察数组。这行不通。您可能想将一个新的限定条件设为qualifications的默认值。

self.Qualifications = ko.observableArray([new Qualification()]);

但是，我会将列表初始化为空，并且仅当有需要添加的内容时才让用户添加一些内容。这样可以节省屏幕空间。

以下是您尝试的改进版本：

将“添加”按钮移出表格。这更有意义-列表为空时将可用，并且不会与每一行重复。
添加了if绑定以在没有内容显示时隐藏整个资格表，并添加了ifnot绑定以在列表为空时显示信息段落。
清理了资格列表，并从代码中删除了重复项。
现在它将整个资格对象存储在视图模型中，而不仅仅是ID。这是通过 not 使用optionsValue绑定来完成的，从而使您不必将资格详细信息复制到每个Qualification对象中。这也消除了对“更新”按钮的需要。
添加了缺少功能deleteQualification。
HTML中没有内联的“ onkeypress”事件处理程序。现在已经不是1995年了，不要编写内联事件处理程序。淘汰赛具有event绑定。
更好的对象和属性名称。只有构造函数应该以大写字母开头。

function checkKeyIsDigit(vm, event) {
  return event.charCode >= 48 && event.charCode <= 57 || event.charCode === 46;
}

function Qualification(data) {
  var self = this;
  self.qual = ko.observable();
  self.marks = ko.observable();
}

function EmployeeQualification() {
  var self = this;
  self.qualificationList = ko.observableArray([
    {id: '0', name: 'Master'},
    {id: '1', name: 'Bachelor'},
    {id: '2', name: 'CA'},
    {id: '3', name: 'School Leaving'}
  ]);
  self.qualifications = ko.observableArray();
  self.addQualification = function() {
    self.qualifications.push(new Qualification());
  };
  self.deleteQualification = function(qual) {
    self.qualifications.remove(qual);
  };
  self.saveQualification = function() {
    console.log(self.qualifications());
  };
}

var vm = new EmployeeQualification();
ko.applyBindings(vm);

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<h3>Employee Qualification</h3>
<hr>

<div class="col-md-12">
  <p data-bind="ifnot: qualifications().length">No qualifications</p>
  <table class="table-bordered" data-bind="if: qualifications().length">
    <thead>
      <tr>
        <th class="text-center">Qualification</th>
        <th class="text-center">Marks</th>
        <th class="text-center">Action</th>
      </tr>
    </thead>
    <tbody data-bind="foreach: qualifications">
      <tr>
        <td>
          <select class="form-control" data-bind="
            value: qual,
            options: $parent.qualificationList,
            optionsText: 'name',
            optionsCaption: '--Choose--'
        "></select>
        </td>
        <td>
          <input type="text" placeholder='Marks' data-bind="
            value: marks,
            event: {keypress: checkKeyIsDigit}
          " class="form-control">
        </td>
        <td>
          <button class="btn btn-default" data-bind="click: $parent.deleteQualification">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
  <hr>
  <div class="col-md-6">
    <button class="btn btn-default" data-bind="click: addQualification">Add Qualification</button>
    <button class="btn btn-default" data-bind="click: saveQualification">Submit</button>
  </div>
</div>
<hr>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

使用剔除js动态添加新行

1 个答案: