0

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

单击“编辑”按钮后是否可以动态插入编辑行？或者有没有更好的方法来使用敲除/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>
4

2 回答 2

1

我会使用你想要的模板，并在你的视图模型中放置一个 observable 来返回你的模板的名称。当您单击编辑按钮时，您将可观察到的 currentTemplate 的名称更改为您的编辑模板，它应该会自动换出您的 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
    };
}
于 2013-02-11T20:53:19.920 回答
1

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

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

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

有关更多详细信息，请参阅有关 If 绑定的淘汰赛文档http://knockoutjs.com/documentation/if-binding.html

于 2013-02-12T04:34:21.637 回答