使用 knockout.js 表优化可编辑项目

Question

我有一个使用 knockout.js 生成的项目表，然后我使用以下代码使每一行上的某些项目可编辑：

function setupDeliveryItemsTable() {
    //console.log('doing setupDeliveryItemsTable');
    $('#deliveryItemsTable').tablesorter({ widgets: ['zebra'], headers: { 4: { sorter: false } } });

    // Select field edit in places
    var fields = $("#deliveryItemsTable div[id^='edit_select-delivery_items-']").map(function() { return this.id; }).get();
    var options = {
        type: 'select',
        loadurl: SITE_URL + '/ajax.php?action=getDeliveryDriversJSON'
    };
    $.each(fields, function() {
        // Determine our settings
        var id = this;
        var table = id.replace(/edit_select-([a-zA-Z_]+?)-([0-9]+?)_(.*)/, '$1');
        var dbID  = id.replace(/edit_select-([a-zA-Z_]+?)-([0-9]+?)_(.*)/, '$2');
        var name  = id.replace(/edit_select-([a-zA-Z_]+?)-([0-9]+?)_(.*)/, '$3');

        var default_options = {
            id        : 'cssID',
            cancel    : '<button class="btn btn-default btn-sm editable-cancel" type="button"><i class="glyphicon glyphicon-remove"></i></button>',
            submit    : '<button class="btn btn-primary btn-sm editable-submit" type="submit"><i class="glyphicon glyphicon-ok"></i></button>',                     
            indicator : indicatorImage,
            tooltip   : 'Click to edit...',
            style     : 'display: inline;',
            width     : 'none'
        };
        options = $.extend({}, default_options, options);
        if ( options.loadurl ) { options.loadurl += '&id=' + dbID; }

        $('#' + id).addClass('editableItemHolder').editable( 
            SITE_URL + '/ajax.php?action=updateDeliveryDriverByID&id=' + dbID, 
            options
        );
    });

    var fields = $("#deliveryItemsTable div[id^='edit-delivery_items-']").map(function() { return this.id; }).get();
    options = {
        type: 'textarea',
    };
    addEditable( fields, options );
}

基本上，这段代码对每一行的几个项目做出反应，如下所示：

<td><div id="edit-delivery_items-62_location">St 156 # 17 ( Phsa Depo )</div></td>
<td><div id="edit-delivery_items-62_notes">Not Pick up 20/05</div></td>
<td><div id="edit_select-delivery_items-62_delivered_by">Click to edit</div></td>

每次替换表的数据时都会重新运行此代码。因此，如果执行搜索，则表数据会发生更改并重新运行 setupDeliveryItemsTable()。

我遇到的问题是有大量行，这会大大减慢页面速度，有时还会导致浏览器崩溃。

我可以做些什么来优化此代码以仍然允许可编辑的项目而不会在服务器上如此困难。

我应该使用类似的东西吗：

$(document).on('click' 

检测对应该是可编辑字段的点击，然后调用可编辑函数并链接点击事件，还是有更好的方法？

Answer 1

感谢您的回复，我能够通过使用 knockout.js 点击处理程序进行一些更改来解决这个问题。我还必须更改 jeditable 以使用按钮来触发可编辑事件。通常我使用 jeditable 使所有表格都可编辑。 Jeditable 做到了，所以当你调用它时，它会处理被点击项目的点击事件。

这是我的最终 HTML

<table class="table table-striped table-bordered table-hover tablesorter" id="deliveryItemsTable" data-bind="visible: showTable">
        <thead> 
            <tr class="title1">
                <td colspan="100%">Delivery Items</td>
            </tr>
            <tr class="title2">
                <th class="header">Created On</th>
                <th class="header">Company</th>
                <th class="header">Item Number</th>
                <th class="header">Phone Number</th>
                <th>Price</th>
                <th class="header">Location</th>
                <th class="header">Notes</th>
                <th class="header">Delivery Driver</th>
                <th class="header">Status</th>
                <th class="header nowrap"></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: deliveryItems">
            <tr data-bind="attr: {id: 'row_' + id }">
                <td data-bind="text: created_on"></td>
                <td data-bind="text: company_name"></td>
                <td data-bind="text: product_number_company"></td>
                <td data-bind="text: client_phone_number"></td>
                <td data-bind="text: formatCurrency(price_to_display)"></td>
                <td>
                    <span data-bind="text: location, attr: {id: 'edit-delivery_items-' + id + '_location' }"></span>
                    <button data-bind="click: $root.editLocation" class="btn btn-default btn-xs" title="Edit"><i class="glyphicon glyphicon-edit"></i></button>
                </td>
                <td>
                    <span data-bind="text: notes, attr: {id: 'edit-delivery_items-' + id + '_notes' }"></span>
                    <button data-bind="click: $root.editNotes" class="btn btn-default btn-xs" title="Edit"><i class="glyphicon glyphicon-edit"></i></button>
                </td>
                <td>
                    <span data-bind="text: delivered_by_text, attr: {id: 'edit_select-delivery_items-' + id + '_delivered_by' }"></span>
                    <button data-bind="click: $root.editDeliveryDriver" class="btn btn-default btn-xs" title="Edit"><i class="glyphicon glyphicon-edit"></i></button>
                </td>                   
                <td data-bind="html: status_labels"></td>
                <td class="center"><span class="btn-group">
                    <button data-bind="click: $root.markAsDelivered, visible: $root.canMarkComplete" class="btn btn-default" title="Mark as delivered"><i class="glyphicon glyphicon-check"></i></button>
                    <a data-bind="attr: {href: 'index.php?action=editDeliveryItem&amp;id=' + id }, visible: $root.canEdit" class="btn btn-default" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> 
                </span></td>
            </tr>
        </tbody>
    </table>
    <div class="alert alert-info" data-bind="visible: showLoadingNotice">
        Loading...
    </div>
    <div id="deliveryItemsTableUpdateNotice"></div>

这是我想出的用于处理表格和可编辑项目的 JS：

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

    self.deliveryItems = ko.observableArray();
    self.showTable = ko.observable(false);
    self.showLoadingNotice = ko.observable(true);
    self.canMarkComplete = ko.observable(false);
    self.canEdit = ko.observable(false);

    self.getDeliveryItems = function () {           
        $.getJSON( SITE_URL + '/ajax.php?action=returnDeliveryItemsTableJSON', function(retrievedData) {
            self.updateData(retrievedData);
            //console.log('back out');
        });         
    };

    self.getDeliveryItemsForToday = function () {           
        var todaysDate = new Date();
        $.getJSON( SITE_URL + '/ajax.php?action=returnDeliveryItemsTableJSON&status=not-delivered&scheduled_for_delivery_on=' + (todaysDate.getMonth() + 1) + '/' + todaysDate.getDate() + '/' +  todaysDate.getFullYear(), function(retrievedData) {
            self.updateData(retrievedData);
            //console.log('back out');
        });         
    };

    self.updateData = function (data) {         
        self.deliveryItems(data);               

        self.showLoadingNotice(false);
        self.showTable(true);
        //console.log(data);

        // We moved this to functions.js since we use it multiple times
        setupDeliveryItemsTable();      
    };

    self.replaceData = function (data) {
        self.showLoadingNotice(true);
        self.showTable(false);  
        self.updateData(data);
    };

    /* Click Functions */
    self.markAsDelivered = function (deliveryItem) {
        bootbox.confirm('Are you sure you want to mark this as delivered?', function(result) {
            if ( result == true ) {
                self.showLoadingNotice(false);
                self.showTable(true);
                jQuery.post(SITE_URL + '/ajax.php?action=markDeliveryItemDelivered&id=' + deliveryItem.id, function(data) {
                    // Trigger the search function to refresh the table
                    $('#searchDeliveryItemsForm').submit();
                });
            }
        });
    };  

    self.editLocation = function (deliveryItem) {
        handleEditOnClick('delivery_items', deliveryItem.id, 'location');
    };
    self.editNotes = function (deliveryItem) {
        handleEditOnClick('delivery_items', deliveryItem.id, 'notes');
    };
    self.editDeliveryDriver = function (deliveryItem) {
        handleEditDeliveryDriverOnClick('delivery_items', deliveryItem.id, 'delivered_by');
    };
};

/* Functions we use for the model above */  
function handleEditOnClick(table, dbID, name) { 
    var options = {
        event     : 'edit',
        id        : 'cssID',
        cancel    : '<button class="btn btn-default btn-sm editable-cancel" type="button"><i class="glyphicon glyphicon-remove"></i></button>',
        submit    : '<button class="btn btn-primary btn-sm editable-submit" type="submit"><i class="glyphicon glyphicon-ok"></i></button>',                     
        indicator : indicatorImage,
        tooltip   : 'Click to edit...',
        style     : 'display: inline;',
        width     : 'none',
        type      : 'textarea'
    };

    $('#edit-' + table + '-' + dbID + '_' + name).editable( 
        SITE_URL + '/ajax.php?action=updateitem&table=' + table + '&item=' + name + '&id=' + dbID, 
        options
    ).trigger('edit');
};
function handleEditDeliveryDriverOnClick(table, dbID, name) {   
    var options = {
        event     : 'edit',
        id        : 'cssID',
        cancel    : '<button class="btn btn-default btn-sm editable-cancel" type="button"><i class="glyphicon glyphicon-remove"></i></button>',
        submit    : '<button class="btn btn-primary btn-sm editable-submit" type="submit"><i class="glyphicon glyphicon-ok"></i></button>',                     
        indicator : indicatorImage,
        tooltip   : 'Click to edit...',
        style     : 'display: inline;',
        width     : 'none',
        type      : 'select',
        loadurl   : SITE_URL + '/ajax.php?action=getDeliveryDriversJSON' + '&id=' + dbID
    };

    $('#edit_select-' + table + '-' + dbID + '_' + name).editable( 
        SITE_URL + '/ajax.php?action=updateDeliveryDriverByID&id=' + dbID, 
        options
    ).trigger('edit');
};

        var viewModel = new deliveryItemsModel();
        ko.applyBindings( viewModel );      

        viewModel.canMarkComplete(true);
        viewModel.canEdit(true);

        viewModel.getDeliveryItems();

我不确定这是否对其他人有帮助，但我想我会分享最终对我有用的东西。

如果有人看到任何进一步优化的方法，请告诉我。