Динамическое добавление новой строки с использованием нокаута js - PullRequest
Новая
       20

Динамическое добавление новой строки с использованием нокаута js

0 голосов
/ 23 июня 2019

используя knockoutjs, у меня есть 2 столбца квалификационного списка и оценки. После того как я нажму кнопку «Добавить», я хочу создать новые строки и заменить кнопку (Добавить) на кнопку «Обновить».

Вот мое демо: https://jsfiddle.net/fjbrsvgn/3/

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);
});

показывает ошибку: аргумент, передаваемый при инициализации наблюдаемого массива, должен быть массивом, либо нулевым, либо неопределенным. Мой ожидаемый результат, когда я ухожу на Квалификацию, должен показывать Квалификационное Имя Квалификационный Идентификатор и Знаки.

1 Ответ

0 голосов
/ 23 июня 2019

Ошибка говорит

Аргумент, передаваемый при инициализации наблюдаемого массива, должен быть массивом, либо нулевым, либо неопределенным.

и вы делаете это: 

self.Qualifications = ko.observableArray(Qualification);

Это передает функцию в наблюдаемый массив. Это не может работать. Вы, вероятно, хотели сделать одну новую квалификацию в качестве значения по умолчанию qualifications. 

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

Однако я бы инициализировал список как пустой и позволил бы пользователю добавлять что-то только тогда, когда есть что добавить. Это экономит место на экране.

Ниже приведена улучшенная версия вашей попытки:

  • Убрал кнопку «Добавить» из таблицы. Это имеет гораздо больше смысла - он будет доступен, когда список пуст, и не будет дублироваться с каждой строкой.
  • Добавлена ​​привязка if для скрытия всей таблицы квалификаций, когда нечего показывать, и привязка ifnot для отображения информационного абзаца, когда список пуст.
  • Очистил список квалификации и удалил дублирование из вашего кода.
  • Теперь он хранит весь объект квалификации в модели представления, а не только ID. Это делается с помощью , а не с использованием привязки optionsValue и избавляет вас от необходимости дублировать детали квалификации в каждом Qualification объекте. Это также устраняет необходимость в кнопке «Обновить».
  • Отсутствует функция deleteQualification добавлено.
  • Нет встроенного обработчика события «onkeypress» в HTML. Сейчас уже не 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);



Employee Qualification



  No qualifications
  
    
      
        Qualification
        Marks
        Action
      
    
    
      
        
          
        
        
          
        
        
          
        
      
    
  
  
  
    
    
  











 
 

 





 

 



 


 

 

 


...