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 选项卡）。

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

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 成功事件期间执行此操作。

作为第二个选项的变体，由于您担心封装，因此不显眼地初始化 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();
    }
});

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

于 2012-08-03T17:14:05.527 回答
0

一种选择是您可以在 ajax 调用结束后加载 jquery-ui 选项卡

如果您使用 jquery 进行 ajax 调用

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