javascript - 从序列化函数中获取 HTML 的值

Question

我正在使用Gridster对于网页。我改变了基本的Serialize函数生成一个 json，它捕获小部件的 HTML 内容及其基本其他参数(行、列、size_x、size_y)。当小部件已经在 HTML 的主体部分中声明时，这可以正常工作。但是当我生成通过 JSON 的小部件，内容不会出现在从序列化函数获取的 json 中。所有其他参数(row、col、size_x、size_y)在两种情况下都会出现。

基本的序列化函数如下

/**
 * Returns a serialized array of the widgets in the grid.
 *
 * @method serialize
 * @param {HTMLElement} [$widgets] The collection of jQuery wrapped
 *  HTMLElements you want to serialize. If no argument is passed all widgets
 *  will be serialized.
 * @return {Array} Returns an Array of Objects with the data specified in
 *  the serialize_params option.
 */
fn.serialize = function ($widgets) {
    $widgets || ($widgets = this.$widgets);
    var result = [];
    $widgets.each($.proxy(function (i, widget) {
        var $w = $(widget);
        if (typeof($w.coords().grid) !== 'undefined') {
            result.push(this.options.serialize_params($w, $w.coords().grid));
        }
    }, this));
    return result;
};

而serialize_params如下

serialize_params: function($w, wgd) {
                    return {
                        col: wgd.col,
                        row: wgd.row,
                        size_x: wgd.size_x,
                        size_y: wgd.size_y
                    };

生成以下形式的json

[{"col":1,"row":1,"size_x":2,"size_y":2}}

我的新序列化函数具有以下性质，它借助生成 html 键值对的函数从 textarea 标记捕获值和 html

新的序列化函数在 json 中生成“值”

gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [100, 100],
  widget_margins: [5, 5],
    serialize_params: function($w, wgd) {
            return {value: $w.find(':input').val(), col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y}
        },
  helper: 'clone',
  resize: {
    enabled: true
  }
}).data('gridster');

生成“HTML”键值对的函数

    $('.js-seralize').on('click', function() {
        var s = gridster.serialize();
        $('.gridster ul li').each((idx, el) => { // grab the grid elements
            s[idx].html = $('textarea', el).html(); // add the html key/values
        });
        $('#log').val(JSON.stringify(s));
});

新函数生成以下形式的json

 [{"value":"","col":3,"row":6,"size_x":2,"size_y":2,"html":"Extracted text from textarea"}]

对于通过 JSON 生成的小部件，“value”键显示为空白。但当在正文中声明小部件时，它就会出现。

“html”键出现在两种情况下(当在正文中声明并从 json 生成时)，但它是静态的(我的意思是，如果小部件文本区域上的内容实时更改，那么它仍然仅显示以前/原始内容，并且不会更新新内容)

我希望在从 JSON 动态生成小部件时也更新“value”键

在 fiddle 中，您可以看到 JSON 中的“值”键仅针对主体部分中声明的小部件进行更新/显示(它具有文本区域值“如果您输入新内容，则会更新”).对于休息，它甚至没有显示。静态的“html”键显示完美。

Fiddle

Answer 1

如果您的网格单元格始终包含文本区域，请更改:

$w.find(':input').val()

进入:

$w.find('textarea').val().trim()

(前者也将与您的按钮匹配，这就是 .val() 调用没有返回您想要的值的原因。)