当淘汰赛中动态添加的输入中的值发生变化时更新视图模型

Question

两周以来我一直在研究 KnockoutJS，我正在尝试使用 KnockOutJS 和 jQuery 在网格中添加内联编辑。我的html：

<table>
<thead>
    <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Excerpts</th>
        <th>Content</th>
    </tr>
</thead>
<tbody data-bind="foreach: Articles">
    <tr>
        <td data-bind="text: id"></td>
        <td data-bind="text: Excerpts, event: { dblclick: $root.editField }"></td>
        <td data-bind="text: Excerpts, event: { dblclick: $root.editField }"></td>
        <td data-bind="text: Content, event: { dblclick: $root.editField }"></td>
    </tr>
</tbody>

我的 JS：

function Articles(Articles) {
    this.id = ko.observable(Articles.id);
    this.Title = ko.observable(Articles.Title);
    this.Excerpts = ko.observable(Articles.Excerpts);
    this.Content = ko.observable(Articles.Content);
}
var ViewModel = {
    Articles: ko.observableArray
        ([new Articles(id = 1, Title = "Title1", Excerpts = "Excerpts1", Content = "Content1")]),
    loadArticles: function () {
        var self = this;
        self.Articles(Articles);
    },
    editField: function (d, e) {
        var currentEle = $(e.target);
        var value = $(e.target).html();
        $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
        $(currentEle).find('input').focus();
        $(currentEle).find('input').keyup(function (event) {
            if (event.keyCode == 13) {
                $(currentEle).html($(currentEle).find('input').val().trim());
                //CallAjaxWithData('/MTB_Articles/EditArticle', 'POST', ko.toJSON(d), null, null); // To update data in server
            }
        });

        $(document).click(function () {
            if ($(currentEle).find('input').val() != null) {
                $(currentEle).html($(currentEle).find('input').val().trim());
                //CallAjaxWithData('/MTB_Articles/EditArticle', 'POST', ko.toJSON(d), null, null); // To update data in server
            }
        });
    }
}
ko.applyBindings(ViewModel);
ViewModel.loadArticles();

每当用户双击网格中的任何 td 时，我都会使用 editField 函数动态添加一个输入字段，并在用户按下回车键或单击其他位置时再次将更新后的值绑定到 td页。 editField 函数中的参数d 给出了当前视图模型对象。当用户编辑特定列中的值时，我必须更新参数d 中的相应值，将d 转换为json 格式并通过ajax 调用将其发送到服务器以在数据库中更新。用户所做的更改应反映在视图模型中（参数d）。那么我们如何使用动态添加的控件来更新视图模型呢？

JSFiddle for this

Answer 1

你可以用更“ko-ish”的方式来做这件事，这会让你更容易。

KO 主要是声明性的，并且您正在混合声明性和过程 (jQuery) 代码。

要使其具有声明性并且更易于实施，请执行以下操作：

• 将editing 可观察属性添加到您的Articles。将其初始化为 false
• 在<td> 中显示文本或数据绑定输入，具体取决于editing 可观察属性的值
• 使用双击事件，将editing设置为true
• 使用回车键对模型中的值执行所需的操作 (ajax)，然后再次将 editing 设置为 false

你可以这样做：

 <td>
   <!-- ko ifnot: editing, text: Excerpts --><!-- /ko -->
   <!-- ko if: editing -->
      <input class="thVal" type="text" data-bind="value: Excerpts" />
   <!--- /ko -->
 </td>

甚至更短：

 <td>
   <!-- ko ifnot: editing, text: Excerpts --><!-- /ko -->
   <input class="thVal" type="text" data-bind="value: Excerpts, if: editing" />
 </td>