JavaScript 文件加载顺序

Question

我正在尝试使用 ASP.NET MVC 和 KnockoutMVC（knockout.js 包装器）制作一个网络应用程序。

不幸的是，我无法获得所有 JS 文件的正确加载顺序。

我的 BundleConfig:

public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.unobtrusive*",
                "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
                "~/Scripts/knockout-{version}.js",
                "~/Scripts/knockout.validation.js",
                "~/Scripts/knockout.mapping-latest.js",
                "~/Scripts/perpetuum.knockout.js"));

            bundles.Add(new ScriptBundle("~/bundles/app").Include(
                "~/Scripts/sammy-{version}.js",
                "~/Scripts/app/common.js",
                "~/Scripts/app/app.datamodel.js",
                "~/Scripts/app/app.viewmodel.js",
                "~/Scripts/app/home.viewmodel.js",
                "~/Scripts/app/_run.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                "~/Scripts/bootstrap.js",
                "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                 "~/Content/bootstrap.css",
                 "~/Content/Site.css"));
        }
    }

在_Layout.cshtml中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    <link href="http://fonts.googleapis.com/css?family=Magra" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/app")
    @Scripts.Render("~/bundles/knockout")

</head>
<body>

/// some html

@RenderBody()

//some html

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("Scripts", required: false)
</body>
</html>

在Index.cshtml

    @using PerpetuumSoft.Knockout
    @model Web.Models.HeroSelectViewModel
    @{
        var ko = Html.CreateKnockoutContext();
    }

//some page code with knockout

    @ko.Apply(Model)

我不断收到这样的错误：

Uncaught ReferenceError: ko is not definedAppViewModel @ app.viewmodel.js:20(anonymous function) @ app.viewmodel.js:75
home.viewmodel.js:27 Uncaught TypeError: Cannot read property 'addViewModel' of undefined(anonymous function) @ home.viewmodel.js:27
knockout-3.1.0.debug.js:2824 Uncaught TypeError: Unable to process binding "foreach: function (){return Heroes }"
Message: Unable to process binding "text: function (){return $data.Exp().ExpLevel }"
Message: $data.Exp is not a function _run.js:2 Uncaught TypeError: Cannot read property 'initialize' of undefined

谁能告诉我应该按什么顺序呈现脚本才能使其正常工作？

Answer 1

在 app 捆绑器之前加载 knockout 捆绑包。

@Scripts.Render("~/bundles/knockout")
@Scripts.Render("~/bundles/app")

JavaScript 文件加载顺序

JavaScript files loading order

javascript

jquery

asp.net-mvc

knockout.js

knockout-mvc