jquery - 如何初始化可在 MVC3 应用程序中动态加载的 jquery ui 小部件

Question

我有一个作为 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 选项卡)。

但是我也希望能够动态地将这个 PartialView 加载到 DOM 中，例如作为 AJAX 请求的结果。在这种情况下确保初​​始化代码运行的常用方法是什么？在 ASP.NET WebForms 应用程序中，我将使用 UpdatePanel，并通过处理加载事件来实现此目的，例如:

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

MVC3 应用程序中的等效项是什么？

Answer 1

您有几个选择。最简单的方法通常是将脚本包含在部分 View 中:

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

tsegay also shows that you can do it during your ajax success event .

作为第二个选项的变体，因为您担心封装，所以不引人注意地初始化 JavaScript 行为。例如:

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

然后您可以将初始化封装到一个公共(public)对象中，如下所示:

<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'));
}

View 不需要知道它必须对分部 View 中的任何内容调用 .tabs() ，只需知道分部 View 具有一些不显眼的 UX 行为即可。您可以使用不引人注目的日期选择器或其他需要初始化的东西来做同样的事情。您所需要的只是 $.myApp 对象中的另一个 $.extend 部分:

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

这样做的另一个优点是您不需要对普通(非部分) View 进行任何初始化。 $(function(){..});上面的大脚本的末尾会在脚本首次加载到浏览器中时调用 $myApp.obtrude(document) 来为您处理该问题。