Заполнить таблицу данными из knockout js observableArray, затем взять один элемент из списка и отобразить его в форме

#asp.net-mvc #knockout.js

#asp.net-mvc #knockout.js

Вопрос:

Добрый день, я новичок в knockout js, и то, что описано в названии, — это то, что я пытаюсь сделать. Первая часть, которую я могу сделать, но я просто не могу понять, как вводить значения в форму, вот некоторый код. С помощью этого я получаю данные:

 $.ajax('@Url.Action("GetEducations", "Candidate")', {
        data: { id: @ViewBag.CandidateId },
        type: "post", dataType: 'json'
    })
        .done(function (result) {
            var mappedEducations = $.map(result, function (item) { return new Education(item) });
            self.educations(mappedEducations);
        })
    .fail(function (xhr, status) {
        alert('@Resources.WebAppLocalization.general_Error');
    });
  

Здесь я помещаю их в таблицу:

 <tbody data-bind="foreach: educations, visible: educations().length > 0">
    <tr>
        <td data-bind="text: InstitutionName"></td>
        <td data-bind="text: Qualification"></td>
        <td data-bind="text: EducationFrom"></td>
        <td data-bind="text: EducationTill"></td>
        <td>
            <a class="link" data-bind="attr: {href: ''}, click: $parent.editEducationFill, clickBubble: false"></a>               
        </td>
    </tr>
</tbody>
  

Теперь, когда кто-то нажимает на ссылку редактирования, он переходит сюда:

  self.editEducationFill = function (education) {
     //TODO
    }
  

Отсюда я хочу, чтобы переданный объект перешел в форму редактирования здесь:

 <form id="FormID">
  <div class="detValue"><input type="text" data-bind="value: InstitutionName"/> </div>
    <div class="detValue"><input type="text" data-bind="value: Qualification" /></div>
    <div class="detValue"><input type="text" data-bind="value: EducationFrom" /></div>
    <div class="detValue"><input type="text" data-bind="value: EducationTill" /></div>
</form>
  

Однако я просто не могу заставить его работать.
За любую помощь заранее благодарю

Ответ №1:

Добавьте наблюдаемый объект в свою модель представления, который будет содержать объект образования, который вы хотите отредактировать.

 self.educationToEdit = ko.observable();
  

В вашем методе: self.editEducationToFill установите educationToEdit на тот, который передан в метод.

 self.editEducationFill = function(education){
    self.educationToEdit(education);
}
  

По вашему мнению, добавьте привязку к данным, которая сообщает форме использовать educationToFill observable для отображения на вашей странице.

 <form id="FormID" data-bind="with: educationToEdit">
    <div class="detValue"><input type="text" data-bind="value: InstitutionName"/></div>
    <div class="detValue"><input type="text" data-bind="value: Qualification" /></div>
    <div class="detValue"><input type="text" data-bind="value: EducationFrom" /></div>
    <div class="detValue"><input type="text" data-bind="value: EducationTill" /></div>
</form>