javascript - objeto - Tipo de campo personalizado editable en X que no respeta los valores predeterminados anulados

objetos json

Question

Tengo un tipo de entrada editable en x personalizado para ingresar una ciudad y seleccionar un país que se muestre así:

Observe los botones en la parte inferior; Esto es así porque el código de inicialización contiene showbuttons: ''bottom'' :

$(''#location'').editable({
    url: ''/post'',
    title: ''Enter city and country'',
    showbuttons: ''bottom'',
    value: {
        city: "Napier",
        country: "nz"
    },
    sourceCountry: [
        {value: "af", text: "Afghanistan"},
        ...
        {value: "zw", text: "Zimbabwe"}
    ]
});

Pero para este widget no tiene sentido renderizar los botones del lado; así que quería que los botones estuvieran allí por defecto; Por lo tanto, intenté establecer el valor predeterminado para este tipo editable:

Location.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
    tpl: '''' +
        ''<div class="editable-location">'' +
        ''<label><span>City: </span><input type="text" name="city"></label>'' +
        ''</div>'' +
        ''<div class="editable-location">'' +
        ''<label><span>Country: </span><select name="country"></select></label>'' +
        ''</div>'',

    inputclass: '''',
    showbuttons: ''bottom'',
    sourceCountry: []
});

Pero la tecla showbuttons está siendo ignorada; Los otros están aplicando bien, pero no esta. Entonces, ¿cómo puedo configurar el valor predeterminado para un tipo editable?

Aquí está el código editable,

(function ($) {
    "use strict";

    var Location = function (options) {
        this.sourceCountryData = options.sourceCountry;
        this.init(''location'', options, Location.defaults);
    };

    //inherit from Abstract input
    $.fn.editableutils.inherit(Location, $.fn.editabletypes.abstractinput);

    $.extend(Location.prototype, {

        render: function () {
            this.$input = this.$tpl.find(''input'');
            this.$list = this.$tpl.find(''select'');

            this.$list.empty();

            var fillItems = function ($el, data) {
                if ($.isArray(data)) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].children) {
                            $el.append(fillItems($(''<optgroup>'', {
                                label: data[i].text
                            }), data[i].children));
                        } else {
                            $el.append($(''<option>'', {
                                value: data[i].value
                            }).text(data[i].text));
                        }
                    }
                }
                return $el;
            };

            fillItems(this.$list, this.sourceCountryData);


        },

        value2html: function (value, element) {
            if (!value) {
                $(element).empty();
                return;
            }
            var countryText = value.country;
            $.each(this.sourceCountryData, function (i, v) {
                if (v.value == countryText) {
                    countryText = v.text.toUpperCase();
                }
            });
            var html = $(''<div>'').text(value.city).html() + '' / '' + $(''<div>'').text(countryText).html();
            $(element).html(html);
        },

        html2value: function (html) {
            return null;
        },

        value2str: function (value) {
            var str = '''';
            if (value) {
                for (var k in value) {
                    str = str + k + '':'' + value[k] + '';'';
                }
            }
            return str;
        },

        str2value: function (str) {
            return str;
        },

        value2input: function (value) {
            if (!value) {
                return;
            }
            this.$input.filter(''[name="city"]'').val(value.city);
            this.$list.val(value.country);
        },

        input2value: function () {
            return {
                city: this.$input.filter(''[name="city"]'').val(),
                country: this.$list.val()
            };
        },

        activate: function () {
            this.$input.filter(''[name="city"]'').focus();
        },

        autosubmit: function () {
            this.$input.keydown(function (e) {
                if (e.which === 13) {
                    $(this).closest(''form'').submit();
                }
            });
        }
    });

    Location.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        tpl: '''' +
            ''<div class="editable-location">'' +
            ''<label><span>City: </span><input type="text" name="city"></label>'' +
            ''</div>'' +
            ''<div class="editable-location">'' +
            ''<label><span>Country: </span><select name="country"></select></label>'' +
            ''</div>'',

        inputclass: '''',
        showbuttons: ''bottom'', //WHY ISN''T THIS WORKING!!!
        sourceCountry: []
    });

    $.fn.editabletypes.location = Location;

}(window.jQuery));

Answer 1

Es posible que tengas una versión antigua de x-editable. Puede encontrar la versión en el enlace que usa para incluirla en el <head> de su documento.

Solo la versión 1.1.1 y posteriores son compatibles con el comando showbuttons.

Si este no es el problema, hágamelo saber y veré qué más puedo averiguar.