Question

我有以下代码（简化以便于阅读）来编辑大网格视图。淘汰赛脚本将为每一行生成隐藏的编辑行。单击“编辑”按钮将取消隐藏该行，以便用户可以编辑该值。几个html <select>控件有许多<option>个标签，因此生成的html很大。

单击“编辑”按钮后是否可以动态插入编辑行？或者有更好的方法来使用knockout / jQuery处理这种常见情况吗？

<table>
    <thead>.... </thead>
    <tbody data-bind="foreach: Contacts">
        <tr data-bind="visible: isEditing==false">
            <td><span data-bind="text:Name"></span></td>
            <td><span data-bind="text: Phone"></span></td>
            <td><span data-bind="text: State"></span></td>
            <td><a href="#" data-bind="click: startEdit">Edit</a></td>
        </tr>
        <tr data-bind="visible: isEditing">
            <td>
                First Name:<input data-bind="value: FirstName" />
                Last Name:<input data-bind="value: LastName" />
            </td>
            <td><input data-bind="value: Phone" /></td>
            <td><select data-bind="value: State">...huge options...</select></td>
            <td><a href="#" data-bind="click: updateContact">Done</a></td>
        </tr>
    </tbody>

Answer 1

我会将templates用于您想要的内容，并在视图模型中放置一个observable来返回模板的名称。当您单击编辑按钮时，您可以将currentTemplate observable的名称更改为您的编辑模板，它应该自动替换您的html。

<tbody data-bind="foreach: Contacts">
    <div data-bind="template: currentTemplate"></div>
</tbody>

<script type="text/html" id="contact-view-template">
    <tr>
         <td><span data-bind="text:Name"></span></td>
         ...
    </tr>
</script>

<script type="text/html" id="contact-edit-template">
    <tr>
        <td>
        First Name:<input data-bind="value: FirstName" />
        Last Name:<input data-bind="value: LastName" />
        </td>
        ...
    </tr>
</script>


var Contact = function () {
    var self = this;

    self.currentTemplate = ko.observable( 'contact-view-template' );

    self.onEditClicked = function () {
        self.currentTemplate( 'contact-edit-template' );
        // Some other logic
    };

    self.onSaveClicked = function () {
        self.currentTemplate( 'contact-view-template' );
        // Some other logic
    };
}

Answer 2

查看您的代码我不确定startEdit按钮是否会显示所有联系人的编辑行或仅显示您单击的联系人。如果仅在编辑行上显示，请考虑使用 If 绑定而不是 Visible 。

<tr data-bind="if: isEditing==false">...</tr>
...
<tr data-bind="if: isEditing">...</tr>

当您使用Visible时，编辑行仍然存在并且所有数据绑定都已应用，它只是不可见。使用如果编辑行根本不存在，除非isEditing为true。在大数据网格上，这可以使页面加载速度明显加快。

有关详细信息http://knockoutjs.com/documentation/if-binding.html

，请参阅If绑定的敲门文档

编辑大表中的行（网格视图）

2 个答案: