0

異なるタイプの約 30 ～ 40 のフィールドに jeditable を使用しているため、多数のブロックを記述する必要があります。

$(".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() を 6 回宣言する必要があります... $(.class).editable を宣言できるかどうか疑問に思います。 () 一度、その中のパラメータを変更しますか? このようにして、最初にすべての反復可能なパラメーターを宣言し、次に要素を調べて追加のデータを追加できます...

どんなアイデアでも大歓迎です！

4

2 に答える 2

0

最初にすべてのデフォルト オプションを使用してオブジェクトを作成し、次に$.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);
}
于 2013-04-16T07:06:29.417 に答える