1

私は、DateTime、Colors などに EditorTemplates を使用しています。これらのテンプレートがかなり含まれている可能性がある私のフォームは、主に Ajax を介して部分ビューとして読み込まれます。

各エディター テンプレートの下部に多数の jQuery 初期化スクリプトを配置するのではなく、応答ごとに 1 回だけ実行する概念的な方法はありますか? 1 つのフォームに 10 個の日時ピッカーがあるとします。同じ初期化コードを 10 回渡すのは本当にばかげています。

10 個の日付ピッカーを使用してメイン フォームに初期化スクリプトを配置すると効率的です (確かに、コードを日時エディター テンプレートに分離しておくことにはあまり効果がありません)。 1 つまたは 2 つまたは 3 つの別のフォームで、これらのスクリプトをコード内の複数のビューに複製しています。

では、ここでエディター テンプレートを適切に活用するにはどうすればよいでしょうか? 私は次のようなものを探していると思います-

EnsureThisScriptIsOutputOncePerThisResponse(<script>$('.datepicker').datepicker("insert lengthy config here");</script>)

AJAX を介してレンダリングされた部分ビューで動作するエディター テンプレートの下部に追加します。

4

4 に答える 4

2

では、ここでエディター テンプレートを適切に活用するにはどうすればよいでしょうか? 私は次のようなものを探していると思います--EnsureThisScriptIsOutputOncePerThisResponse() をエディター テンプレートの下部に追加します。

カセット使用。これは、部分ビューからでも、どこからでもスクリプトとスタイルシートを参照できるライブラリです。次に、スクリプトの参照順序を確認し、スクリプトをレンダリングして、このスクリプトとその参照が 1 回だけ出力され、通常は応答として 1 か所に出力されるようにします。

アップデート：

ajax のスクリプトの参照は、次のように実行できます。

datepicker エディター テンプレート - EditorTemplates/DateTime.cshtml

@model DateTime?
@{
    Bundles.ReferenceScript("path to datepicker script. Script may reference jquery ui in its turn");
} 
//datepicker

また、datepicker コンテナー形式で、スクリプトを直接レンダリングします。ajax でない場合、これは Layout ページで行われます。

@model ViewModelModelWithTenDates
@Bundles.RenderScripts() //will output distinc script references in order

//10 datepickers
@Html.EditorFor(model => model.FirstDate)
于 2012-01-26T14:50:41.937 に答える
1

私たちのプロジェクトで行ったことの 1 つは、データ属性を使用してそのような構成を行うことにより、邪魔にならない JavaScript パターンを拡張する startup.js ファイルを用意することでした。私たちの例はボタンです。次のhtmlがあったとしましょう：

<input type='submit' data-button=true data-button-icon='ui-icon-check' value='approve' />

起動ファイルは、次のようなボタンを探します。

function initializeButtons() {
    $("*[data-button=true]").each(function () {
        var $this = $(this);
        var initialized = $this.data('button-init');
        if (!initialized) {
            var options = {
                disabled: $this.data('button-disabled'),
                text: $this.data('button-text'),
                icons: {
                    primary: $this.data('button-icon-primary') || $this.data('button-icon'),
                    secondary: $this.data('button-icon-secondary')
                }
            };
            $this.button(options);
            $this.data('button-init', true);
        }
    });
}

$(document).ready(initializeButtons).ajaxSuccess(initializeButtons)

これにより、一般的な jQuery UI 初期化コードの管理がはるかに容易になり、HtmlHelper 拡張機能を作成して、必要/使用するもののデータ属性を簡単に入力できるようになりました。

于 2012-01-26T15:50:40.130 に答える
1

プラグインを使用livequeryして、初期化コードを外部の .js ファイルに追加し、そのファイルを _Layout.cshtml に含めることができます。

$(".datepicker").livequery(function(){
    $(this).datepicker("insert lengthy config here");
});
于 2012-01-26T16:30:14.443 に答える
1

スクリプトの実行が必要なものには、init 属性を使用します。

<input type="text" id="id" init="datepicker makereadonly" />

これは、2 つの関数を実行する必要があることを示しています。それらの実行は、外部ファイルで定義されている Ajax-complete で行われます。項目が初期化されると、initialized 属性が設定されることに注意してください。このようにして、部分ビューにスクリプトは存在しません。

var initFunctions = initFunctions || {};

initFunctions.datepicker = function(item) {
    $(item).datepicker();
};

initFunctions.readonly = function(item) {
    $(item).attr("disabled", "disabled");
};

$('body').ajaxComplete(function (e, xhr, settings) {
  var itemFunction = function (item) {
     var $this = $(item);
     var attr = $this.attr("init");
     var functions = attr.split(" ");
     for (var i = 0; i < functions.length; i++) {
        var funcName = functions[i];
        var func = initFunctions[funcName];
        if (func != undefined)
           func($this);
     }
     $this.attr("initialized", "");
  };

  items = $("[init]:not([initialized])");
  items.each(function (index, item) { itemFunction(item); });
});
于 2012-01-31T07:03:59.913 に答える