用knockout js observableArray中的数据填充表格，然后从列表中取出一个项目，并将其显示在表单中

Question

大家好我是新的淘汰赛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
    }

从这里我想要传递的对象到这里的edit form:

<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>

然而，我就是不能让它工作。如有任何帮助，请提前感谢

Answer 1

添加一个可观察对象到你的视图模型，它将包含你想要编辑的教育对象。

self.educationToEdit = ko.observable();

在你的方法中:self。editEducationToFill，将其设置为传递给方法的那个。

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

在你的视图中，添加一个数据绑定，告诉表单使用educationToFill可观察对象在你的页面上显示。

<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>