2

MVC3 PartialView として実装された再利用可能なコンポーネントがあります。コンポーネントには、実行するために JavaScript 初期化コードを必要とする jquery-ui ウィジェットが含まれています。以下は簡単な例です。

==== MySimplifiedPartialView.cshtml ====

<div id="myTabs">
    <ul>
        <li><a href="#myTabs-tab1">Tab 1</a></li>
        <li><a href="#myTabs-tab2">Tab 2</a></li>
        <li><a href="#myTabs-tab3">Tab 3</a></li>
        <li><a href="#myTabs-tab4">Tab 4</a></li>
    </ul>
    <div id="myTabs-tab1">
       ...content
    </div>
    <div id="myTabs-tab2">
       ... content
    </div>
    ... etc ...
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#myTabs").tabs();
    });
</script>

この PartialView がページに正常に読み込まれると、初期化コード$(document).readyが実行され、ウィジェットが適切に初期化されます (この場合は jquery-ui タブとして)。

ただし、たとえば AJAX 要求の結果として、この PartialView を動的に DOM にロードできるようにしたいと考えています。この場合、初期化コードが確実に実行されるようにする通常の方法は何ですか? ASP.NET WebForms アプリでは、を使用しUpdatePanel、load イベントを処理することでこれを実現します。次に例を示します。

Sys.Application.add_load(function () {
    $("#myTabs").tabs();
});

MVC3 アプリケーションで同等のものは何ですか?

4

2 に答える 2

4

いくつかのオプションがあります。多くの場合、部分ビューにスクリプトを含めるのが最も簡単です。

<div id="#partial_view">Here is content in my partial view</div>
<script type="text/javascript">
    (function($) {
        $('#partial_view #myTabs').tabs();
    } (jQuery));
</script>

tsegay は、ajax 成功イベント中にそれを実行できることも示しています。

2 番目のオプションのバリエーションとして、カプセル化が心配なので、控えめに JavaScript の動作を初期化します。例えば：

<div data-tabs="true">Here is content in my partial view</div>

その後、次のように初期化を共通オブジェクトにカプセル化できます。

<script type="text/javascript">
    (function($) {
        $.myApp = {
            obtruders: {}
        };

        // apply obtrusive behaviors
        $.myApp.obtrude = function (selector, obtruders) {
            var obtruder;
            obtruders = obtruders || $.myApp.obtruders;
            for (obtruder in obtruders) { // execute every registered obtruder
                if (obtruders.hasOwnProperty(obtruder)) { // skip any inherited members

                    // apply an unobtrusive behavior
                    if (typeof obtruders[obtruder] === 'function') {
                        obtruders[obtruder].apply(this,
                            Array.prototype.slice.call(arguments, 0, 1) || document);
                    }

                    // apply all unobtrusive behaviors in set
                    if (typeof obtruders[obtruder] === 'object') {
                        $.myApp.obtrude(selector, obtruders[obtruder]);
                    }
                }
            }
        };

        // apply tabs behavior
        $.extend($.myApp.obtruders, {
            tabs: function (selector) {
                $(selector).find('[data-tabs=true]').tabs();
            }
        });

        $(function() {
            // initialize unobtrusive behaviors
            $.myApp.obtrude(document);
        );

    } (jQuery));
</script>

上記のコードにはいくつかの初期設定がありますが、最終的には ajax 成功イベント中にこれを行うことができます。

success: function(html) {
    $('#partial_placeholder').html(html);
    $.myApp.obtrude($('#partial_placeholder'));
}

ビューは、部分ビューの何かに対して .tabs() を呼び出す必要があることを知る必要はありません。部分ビューには目立たない UX 動作があることだけが必要です。目立たない日付ピッカーやその他の初期化が必要なものでも同じことができます。必要なのは、$.myApp オブジェクトの別の $.extend セクションだけです。

// apply datepickers
$.extend($.myApp.obtruders, {
    datepickers: function(selector) {
        $(selector).find('[data-datepicker=true]').datepicker();
    }
});

これのもう 1 つの利点は、通常の (部分的ではない) ビューで初期化を行う必要がないことです。$(関数(){..}); 上記の大きなスクリプトの最後で、スクリプトが最初にブラウザーに読み込まれるときに $myApp.obtrude(document) を呼び出すことで、それを処理します。

于 2012-08-03T17:14:05.527 に答える
0

1 つのオプションは、ajax 呼び出しの終了後に jquery-ui タブをロードできることです。

jquery を使用して ajax 呼び出しを行う場合

$.get('..',{},function(){
$("#myTabs").tabs(); //this will load the jquery-ui tabs
});
于 2012-08-03T17:15:37.177 に答える