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在页面的其他地方。 d函数中的参数editField给出了当前的viewmodel对象。当用户编辑特定列中的值时，我必须更新参数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>

当敲除动态添加的输入中的值更改时更新viewmodel

1 个答案: