X-editable自定义字段类型不遵守重写的默认值 [英] X-editable custom field type not respecting overridden defaults

问题描述

我有一个自定义x可编辑的输入类型，用于输入城市并选择一个像这样呈现的国家：

I have a custom x-editable input type for entering a city and selecting a country that renders like so:

注意底部的按钮;这是因为初始化代码包含 showbuttons：'bottom'：

Notice the buttons at the bottom; This is so because the initialization code contains 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"}
    ]
});

但对于这个小部件，在侧面渲染按钮是没有意义的;所以我希望按钮默认存在;
因此我尝试设置此可编辑类型的默认值：

But for this widget it makes no sense to render the buttons at the side; so I wanted the buttons to be there by default; Hence I tried setting the default for this editable type:

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: []
});

但 showbuttons 键被忽略;其他人正在申请罚款，但不是这个。那么如何设置可编辑类型的默认值？

But the showbuttons key is being ignored; the others are applying fine, but not this one. So how can I set the default for a editable type?

这是可编辑的代码，

(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));

推荐答案

你可能有旧版x-editable 。您可以在您使用的链接中找到您的文档的< head> 中包含的版本。

It's possible you have an old version of x-editable. You can find the version in the link you use to include it in the <head> of your document.

只有版本1.1.1及更高版本支持showbuttons命令。

Only version 1.1.1 and later supports the showbuttons command.

如果这不是问题，请告诉我，我会看到还有什么我能弄明白。

If this is not the issue, let me know and I'll see what else I can figure out.

这篇关于X-editable自定义字段类型不遵守重写的默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！