时间戳

首页 > 解决方案 > 迭代自定义应用程序中的所有字段/从单个字段转换代码

javascript - 迭代自定义应用程序中的所有字段/从单个字段转换代码

问题描述

我有下面的代码，它在我正在应用程序“诀窍”中构建的自定义应用程序中运行良好。

但是，我希望能够自动保存应用程序中的所有字段，而不只是保存一个字段。

是否可以遍历所有“视图”和“字段”以使此 jQuery 在应用程序中的所有“视图”和“字段”上工作？

var viewId = "view_19";
var fieldId = "field_31";
var autoSaveDelay = 2000; // Value in milliseconds, 800 = .8 seconds

// Listen to our Article Edit view, when rendered register our actions
$(document).on('knack-view-render.' + viewId, function(event, view, records) {
    console.log(" >>> Rendered view");

    // Temporarily store data for comparison later
    var initialData = $("#" + viewId).find("#" + fieldId).val();

    var timer = {};

    var autoSaveLabel = document.createElement('span');
    autoSaveLabel.id = "autosave_label_" + viewId + "_" + fieldId;
    autoSaveLabel.style = "font-style: italic;";

    // Add autosave checkbox flag to field
    $("#kn-input-" + fieldId).append(autoSaveLabel);

    // Add listener for keyup
    $("#" + viewId).find("#" + fieldId).on('keyup', function() {

        // If the data is the same... don't save it!
        if (initialData !== $("#" + viewId).find("#" + fieldId).val()) {

            // Show edited label
            var autoSaveLabelElement = $("#autosave_label_" + viewId + "_" + fieldId);
            autoSaveLabelElement.html("This field was edited...");
            autoSaveLabelElement.show();

            // Cancel timer if it was already running 
            clearTimeout(timer);

            // Start timer
            timer = setTimeout(function() {

                // Call Knack API to update field
                var data = {};
                data[fieldId] = $("#" + viewId).find("#" + fieldId).val();
                $.ajax({
                    url: 'https://api.knack.com/v1/pages/scene_12/views/' + viewId + '/records/' + records.id,
                    type: 'PUT',
                    headers: {
                        'Authorization': Knack.getUserToken(),
                        'X-Knack-Application-Id': Knack.application_id,
                        'X-Knack-REST-API-Key': '6bf3a9a0-caf1-11e8-bbe4-556d6e072f02',
                        'Content-Type': 'application/json'
                    },
                    data: JSON.stringify(data),
                    success: function(records) {
                        console.log(" >>> Auto Saved...");
                        autoSaveLabelElement.html("Automatically saved...");
                        autoSaveLabelElement.fadeOut(autoSaveDelay);

                        // Re-save data in var for future comparisons
                        initialData = $("#" + viewId).find("#" + fieldId).val();
                    }
                });
            }, autoSaveDelay);
        }
    })
});

标签： javascriptjquery

解决方案

您可以一次将事件处理程序分配给多个元素。您可以尝试以下方法 -

var viewId = "view_";
var fieldId = "field_";

var viewIdSelector = $('id^="'+ viewId + '"');
var fieldIdSelector = $('id^="'+fieldId + '"');
$(viewIdSelector).find(fieldIdSelector).on('keyup', function() {
..your logic
}

这适用于应用程序中的所有视图和所有字段。

欲了解更多信息， http://api.jquery.com/on/#on-events-selector-data

推荐阅读