Как сделать такое объявление jquery более компактным?

Я использую jeditable примерно для 30-40 полей разного типа, поэтому мне нужно написать несколько блоков

$(".editable-...type of element...").editable(method, {parameters})

для разных типов элементов, которые у меня есть в форме (строка, int, разные выпадающие списки). Например, вот вариант для строки:

$(".editable-jedit-string").editable("/Controller/Method",
    {
        submitdata: {
            ItemId: '@ViewData["ItemId"]'
        },
        cssclass: 'inherit',
        indicator: 'wird gespeichert...',
        style: 'display:inline',
        height: '15px',
        width: '150px',
        placeholder: '<span class="muted">Zum Bearbeiten doppelklicken...</span>',
        tooltip: 'Zum Bearbeiten doppelklicken...',
        event: 'dblclick',
        submit: '<button class="btn btn-mini btn-primary btn-forced-margin" type="submit" >OK</button>'
    });

и для раскрывающегося списка

**$(".editable-jedit-string-welle")**.editable("/Controller/Method",
    {
        submitdata: {
            ItemId: '@ViewData["ItemId"]'
        },
        **data: " {'A':'A','B':'B','C':'C'}",**
        type: "select",
        cssclass: 'inherit',
        indicator: '<span class="muted">wird gespeichert...</span>',
        style: 'display:inline',
        height: '15px',
        **width: '15px',**
        placeholder: '<span class="muted">Zum Bearbeiten doppelklicken...</span>',
        tooltip: 'Zum Bearbeiten doppelklicken...',
        event: 'dblclick',
        submit: '<button class="btn btn-mini btn-primary btn-forced-margin" type="submit" >OK</button>'
    });

Так вот, большинство параметров все время повторяются, а некоторые (здесь я пытался их выделить жирным шрифтом, но вместо этого они в звездочках..) отличаются.

Мой вопрос в том, как я могу сделать код более компактным? У меня есть около 6 таких объявлений, и я думаю, что код можно отрефакторить, чтобы он выглядел лучше.

Я могу создать параметры для всех повторяющихся элементов (объявление кнопки, метки, стиль), но тогда мне все равно придется объявить .editable() шесть раз... Интересно, можно ли объявить $(.class).editable () один раз, а затем изменить параметр внутри него? Таким образом, я могу сначала объявить все повторяющиеся параметры, а затем пройтись по элементам и добавить дополнительные данные...

Любые идеи приветствуются!


javascript jquery refactoring jeditable
person Anelook    schedule 16.04.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете сначала создать объект со всеми параметрами по умолчанию, а затем использовать $.extend() для слияния изменений/новых свойств.

var myDefaults = {
    submitdata: {
        ItemId: '@ViewData["ItemId"]'
    },
    cssclass: 'inherit',
    indicator: 'wird gespeichert...',
    style: 'display:inline',
    height: '15px',
    width: '150px',
    placeholder: '<span class="muted">Zum Bearbeiten doppelklicken...</span>',
    tooltip: 'Zum Bearbeiten doppelklicken...',
    event: 'dblclick',
    submit: '<button class="btn btn-mini btn-primary btn-forced-margin" type="submit" >OK</button>'
};

$(".selector").editable("/Controller/Method", $.extend(true, {}, myDefaults, {
    data: " {'A':'A','B':'B','C':'C'}",
    width: '15px'
});

Синтаксис $.extend() немного сложен, поэтому вы можете использовать .bind(), чтобы свернуть свой собственный.

// create a function with your default parameters for $.extend()
var editableParams = $.extend.bind({}, true, {}, myDefaults); 

// usage
$(".selector").editable("/Controller/Method", editableParams({
    data: " {'A':'A','B':'B','C':'C'}",
    width: '15px'
});

Демо на http://jsfiddle.net/6GQ9Y/

$.extend() документы на http://api.jquery.com/jQuery.extend/

.bind() ссылка (и прокладка): https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

ОБНОВИТЬ

Приведенный выше метод .bind() — это всего лишь причудливый способ создания новой функции. Однако кажется, что он не поддерживается в IE 8 и более ранних версиях. Тот же самый ярлык может быть достигнут с помощью следующего кода:

function editableParams(options) {
    return $.extend(true, {}, myDefaults, options);
}
person xec    schedule 16.04.2013
comment
спасибо за решение! может быть, вы также можете предложить, как решить проблему, связанную с тем, что в IE8 нет метода .bind()? в IE текущее решение не работает - person Anelook; 17.04.2013
comment
Решение найдено! Добавлен код отсюда для поддержки совместимости: developer.mozilla. org/en-US/docs/JavaScript/Reference/ - person Anelook; 17.04.2013
comment
@Anelook Спасибо, я не знал, что .bind() реализован так плохо. Обновил ответ. - person xec; 17.04.2013

arrow_upward
0
arrow_downward

Вы можете извлечь общие свойства в общий объект.

var defaultEditableConfig = {
    width: 15px,
    height: 15px,
    ...
}

а потом

$('.editable-class').editable($.extend({}, defaultEditableConfig, {
    data: { 'A' : 'a', 'B' : 'b' }
});

И, конечно же, вы можете обернуть это служебным методом или чем-то еще, чтобы упростить вызов с помощью подписи, например:

makeEditable(jQueryElementString, options);
person EMMERICH    schedule 16.04.2013