javascript - X-可编辑的自定义地址

Question

我扩展了X-editable插件地址功能。我将其更改为具有一个文本字段和一个复选框，而不是三个文本字段。但是我该怎么做才能在数据库中的值为 1 时选中该复选框，如果为 0 则不选中该复选框。

我的扩展是这样的:

(function ($) {
    "use strict";

    var Address = function (options) {
        this.init('address', options, Address.defaults);
        };

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

    $.extend(Address.prototype, {
    /**
    Renders input from tpl
    @method render() 
    **/        
    render: function() {
        this.$input = this.$tpl.find('input');
    },

    /**
    Default method to show value in element. Can be overwritten by display option.

    @method value2html(value, element) 
    **/
    value2html: function(value, element) {
        if(!value) {
            $(element).empty();
            return; 
        }
        var html = $('<div>fwfewfe').text(value.number).html() + ', ' + $('<div>').text(value.check).html();
        $(element).html(html); 
    },

    /**
    Gets value from element's html

    @method html2value(html) 
    **/        
    html2value: function(html) {        
        /*
        you may write parsing method to get value by element's html
        e.g. "Moscow, st. Lenina, bld. 15" => {city: "Moscow", street: "Lenina", building: "15"}
        but for complex structures it's not recommended.
        Better set value directly via javascript, e.g. 
        editable({
        value: {
        city: "Moscow", 
        street: "Lenina", 
        building: "15"
        }
        });
        */ 
        return null;  
    },

    /**
    Converts value to string. 
    It is used in internal comparing (not for sending to server).

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

    /*
    Converts string to value. Used for reading value from 'data-value' attribute.

    @method str2value(str)  
    */
    str2value: function(str) {
    /*
    this is mainly for parsing value defined in data-value attribute. 
    If you will always set value by javascript, no need to overwrite it
    */
        return str;
    },                

    /**
    Sets value of input.

    @method value2input(value) 
    @param {mixed} value
    **/         
    value2input: function(value) {
        if(!value) {
            return;
        }
        this.$input.filter('[name="number"]').val(value.number);
        this.$input.filter('[name="check"]').val(value.check);
    },       

    /**
    Returns value of input.

    @method input2value() 
    **/          
    input2value: function() { 
        return {
            number: this.$input.filter('[name="number"]').val(), 
            check: this.$input.filter('[name="check"]').val(), 
        };
    },        

    /**
    Activates input: sets focus on the first field.

    @method activate() 
    **/        
    activate: function() {
        this.$input.filter('[name="number"]').focus();
    },  

    /**
    Attaches handler to submit form in case of 'showbuttons=false' mode

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

Address.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
    tpl: '<div class="editable-input"><input type="text" name="number" class="form-control"></div>'+
'<div class="checkbox"><label for="check"><input type="checkbox" id="check" name="check" value="1" class="input-small">fewfe</label></div>',
        inputclass: ''
});

$.fn.editabletypes.address = Address;

}(window.jQuery));

Answer 1

我遇到了一个非常类似的问题，您需要修复复选框的“值”(它实际上不是一个值，它是一个 Prop )。

在 value2input 中，您应该使用

this.$input.filter('[name="check"]').prop('checked', value.check);

并检索您应该使用的值

input2value: function() { 
    return {
        number: this.$input.filter('[name="number"]').val(), 
        check: this.$input.filter('[name="check"]').is(':checked') ? 1 : 0, 
    };
},

希望这有帮助!