部分视图和 jQuery 图形问题答案

【问题标题】：Partial View and jQuery graph issues部分视图和 jQuery 图形问题
【发布时间】：2016-02-09 16:31:44
【问题描述】：

我继承了一个项目，并且对 UI 非常满意。本项目在 Chrome 上使用 Bootstrap、nvd3 和 flot。有一个布局视图，其中引用了 jQuery，然后在布局主体中呈现每个页面的部分视图。在仪表板页面上，除非在脚本中再次引用 jQuery，否则图表不会显示，但该引用会导致侧边栏停止工作。可以在仪表板脚本中复制引用缓动以使图形显示和侧边栏运行，但一个图形仍然无法正常工作。这让我相信 jQuery 及其库在布局和局部视图上被多次引用，消除了显示图形、激活侧边栏、正确渲染图形等的引用。

如果正确，有没有办法跟踪每个 jQuery 引用？我尝试通过视觉删除源代码中的多个引用，将布局引用移动到 HTML 正文中，测试通过 Chrome 开发人员工具击中的内容，重新调用上述引用作为创可贴，并在此处搜索类似的问题，但似乎没有什么能同时实现正确的视觉和功能。此外，共享相同父布局的不同局部视图上的重复 jQuery 引用是否可以使任何其他局部视图中的引用无效？如果这里没有考虑其他可能的解决方案，请提出意见，因为我最终试图让侧边栏和图表正常工作。提前感谢您查看此内容。

这是带有参考的布局：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <link rel="shortcut icon" href="/favicon.ico" />

    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/icons")

    @Scripts.Render("~/bundles/modernizr")

    @RenderSection("headcontent", required: false)

    <!-- page specific stylesheets -->
    <!-- nvd3 charts -->
    <link rel="stylesheet" href="/Content/lib/novus-nvd3/nv.d3.min.css">
    <!-- owl carousel -->
    <link rel="stylesheet" href="/Content/lib/owl-carousel/owl.carousel.css">

    <!-- google webfonts -->
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400&amp;subset=latin-ext,latin' rel='stylesheet' type='text/css'>

    <!-- datepicker -->
    <link rel="stylesheet" href="/Content/lib/bootstrap-datepicker/css/datepicker3.css">
    <!-- date range picker -->
    <link rel="stylesheet" href="/Content/lib/bootstrap-daterangepicker/daterangepicker-bs3.css">
    <!-- timepicker -->
    <link rel="stylesheet" href="/Content/lib/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
    <!-- ion.rangeSlider -->
    <link rel="stylesheet" href="/Content/lib/ion.rangeSlider/css/ion.rangeSlider.css">
    <!-- bootstrap switches -->
    <link href="/Content/lib/bootstrap-switch/build/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
    <!-- 2col multiselect -->
    <link href="/Content/lib/multi-select/css/multi-select.css" rel="stylesheet">
    <!-- multiselect, tagging -->
    <link rel="stylesheet" href="/Content/lib/select2/select2.css">

    <!-- main stylesheet -->
    <link href="/Content/css/style.css" rel="stylesheet" media="screen">

    <!-- moment.js (date library) -->
    <script src="/Content/lib/moment-js/moment.min.js"></script>


    [styles omitted...]

</head>
<body>
    [header omitted...]

    <!-- main content -->
    <div id="main_wrapper">

        [messages omitted...]

        @RenderBody()
    </div>

    <!-- side navigation -->
    <nav id="side_nav">
        @Html.Partial("~/Views/Shared/_SidebarLeft.cshtml")
    </nav>

    <!-- jQuery -->
    <script src="/Content/js/jquery.min.js"></script>
    <!-- easing -->
    <script src="/Content/js/jquery.easing.1.3.min.js"></script>
    <!-- bootstrap js plugins -->
    <script src="/Content/bootstrap/js/bootstrap.min.js"></script>
    <!-- top dropdown navigation -->
    <script src="/Content/js/tinynav.js"></script>
    <!-- perfect scrollbar -->
    <script src="/Content/lib/perfect-scrollbar/min/perfect-scrollbar-0.4.8.with-mousewheel.min.js"></script>

    <!-- common functions -->
    <script src="/Content/js/tisa_common.js"></script>

    @RenderSection("Scripts", required: false)

</body>
</html>

这是仪表板 HTML：

@using Project.Models
@model DashboardViewModel
@{
    ViewBag.Title = "Home Page";

    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="heading_b">Prices Chart</div>
                <div class="panel-body">
                    <div id="nvd3_cumulativeLine" style="width: 100%; height: 300px">
                        <svg></svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

最后，这里是仪表板脚本，移除 jQuery 会导致图表消失，移除缓动会导致侧边栏停止弹出，移除这两者会导致图表消失但侧边栏功能完好无损。

@section Scripts{
    <!-- page specific plugins -->

    <!-- jQuery DUPLICATE -->
    <script src="/Content/js/jquery.min.js"></script>
    <!-- easing DUPLICATE -->
    <script src="/Content/js/jquery.easing.1.3.min.js"></script>

    <!-- nvd3 charts -->
    <script src="/Content/lib/d3/d3.min.js"></script>
    <script src="/Content/lib/novus-nvd3/nv.d3.min.js"></script>
    <!-- flot charts-->
    <script src="/Content/lib/flot/jquery.flot.min.js"></script>
    <script src="/Content/lib/flot/jquery.flot.pie.min.js"></script>
    <script src="/Content/lib/flot/jquery.flot.resize.min.js"></script>
    <script src="/Content/lib/flot/jquery.flot.tooltip.min.js"></script>
    <!-- clndr -->
    <script src="/Content/lib/underscore-js/underscore-min.js"></script>
    <script src="/Content/lib/CLNDR/src/clndr.js"></script>
    <!-- easy pie chart -->
    <script src="/Content/lib/easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
    <!-- owl carousel -->
    <script src="/Content/lib/owl-carousel/owl.carousel.min.js"></script>

    <!-- dashboard graph functions -->
    <script src="/Content/js/apps/tisa_dashboard.js"></script>

    <script type="text/javascript">
        function cumulativeTestData() {
            var closes = JSON.parse('@Html.Raw(Json.Encode(Model.Coordinates))')
            return [
                {
                    key: "Prices",
                    values: closes
                },
            ];
        }
    </script>
}

【问题讨论】：

标签： javascript jquery html twitter-bootstrap nvd3.js

【解决方案1】：

您认为多次加载同一个脚本时存在冲突是正确的。只加载每个脚本一次。

我明白为什么尝试从局部视图中删除这些脚本会导致局部视图失败。直到局部视图之后才加载脚本。在您的局部视图中的所有内容都已加载并执行之后，它们才会存在。

在您的布局中，将脚本移动到标题（首选）或至少移动到一个点，然后再拉入局部视图。然后在您的局部视图中，确保没有对已加载脚本的引用。

在部分视图中，我经常使用脚本管理员来加载可能已动态加载或未动态加载的脚本。这是您可以用来尝试加载脚本的东西。它检查页面上是否已经加载了同名的脚本（特别是在标题标签中），如果已经加载，它不会尝试再次加载它。这不是最漂亮的，但它完成了工作。

mycode = function()
{

    //Put all your custom javascript here.
    //This will run when the scripts below have successfully been processed.

}
var headTag = document.getElementsByTagName("head")[0];
var initialScripts = ["/scripts/jquery-2.1.4.min.js",
                        "/scripts/jquery-ui.min.js",
                        "/scripts/jquery.timepicker.min.js"];
var neededScripts = [];
for (var z = 0; z < initialScripts.length; z++) {
    if (!isScriptLoaded(initialScripts[z]))
        neededScripts.push(initialScripts[z]);
}
if(neededScripts.length)
    addScripts(neededScripts, headTag, function () { mycode(); delete mycode; }, 0);
else {
    mycode(); delete mycode;
}
function addScripts(scriptsToLoad, loadTag, callback, i) {
    if (i >= scriptsToLoad.length)
        return;
    var script = scriptsToLoad[i];
    var scriptTag = document.createElement('script');
    scriptTag.setAttribute('type', 'text/javascript');
    scriptTag.setAttribute('src', script);
    if (i >= (scriptsToLoad.length - 1)) {
        scriptTag.onload = callback;
    }
    else {
        scriptTag.onload = function () {
            console.log("Added script file " + script);
            addScripts(scriptsToLoad, loadTag, callback, i + 1);
        }
    }
    loadTag.appendChild(scriptTag);
}

function isScriptLoaded(url) {
    var tags = document.getElementsByTagName('script');
    for (var i = tags.length; i--;) {
        var existingName = tags[i].src.split('/');
        existingName = existingName[existingName.length-1];

        var newName = url.split('/');
        newName = newName[newName.length-1];

        if (existingName == newName) return true;
    }
    return false;
}

【讨论】：

出色的反应，保罗。到目前为止，我刚刚将布局脚本移至标题，删除了局部视图中的重复项，并清除了缓存/cookie。图表和侧边栏现已显示，但图表仍未正确调整或应用交互式指南线。除非您有任何建议，否则我会将其用作单独的主题，但我会将此答案标记为正确。
如果您可以在小提琴中重新创建问题 (jsfiddle.net)，这将是一个很大的帮助。否则我不确定是什么导致了您的问题。
我开始使用小提琴，但现在引用在缓存和 cookie 之后生成 404清除。因此，源显示关闭对象的值，但图表现在为空。