JavaScript 文件加载顺序答案

【问题标题】：JavaScript files loading orderJavaScript 文件加载顺序
【发布时间】：2015-10-15 01:59:12
【问题描述】：

我正在尝试使用带有 KnockoutMVC（knockout.js 包装器）的 ASP.NET MVC 制作一个 Web 应用程序。

不幸的是，我无法为所有 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 未捕获类型错误：无法读取未定义的属性“addViewModel”（匿名函数）@ home.viewmodel.js:27
knockout-3.1.0.debug.js:2824 Uncaught TypeError: Unable to process binding "foreach: function (){return Heroes }"
消息：无法处理绑定“文本：函数 (){return $data.Exp().ExpLevel }”
消息：$data.Exp 不是函数 _run.js:2 Uncaught TypeError: Cannot read property 'initialize' of undefined

谁能告诉我我应该按什么顺序渲染脚本才能让它工作？

【问题讨论】：

标签： javascript jquery asp.net-mvc knockout.js knockout-mvc

【解决方案1】：

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

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

【讨论】：