Question

我尝试使用带有KnockoutMVC的ASP.NET MVC创建一个Web应用程序（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)

我一直收到这样的错误：

未捕获的ReferenceError：ko未定义AppViewModel @ app.viewmodel.js：20（匿名函数）@ app.viewmodel.js:75
      home.viewmodel.js：27 Uncaught TypeError：无法读取属性＆＃39; addViewModel＆＃39; undefined（匿名函数）@ home.viewmodel.js：27
      knockout-3.1.0.debug.js：2824 Uncaught TypeError：无法处理绑定＆＃34; foreach：function（）{return Heroes}＆＃34;
      消息：无法处理绑定＆＃34; text：function（）{return $ data.Exp（）。ExpLevel}＆＃34;
      消息：$ data.Exp不是函数       _run.js：2未捕获的TypeError：无法读取属性＆＃39;初始化＆＃39;未定义的

有人能告诉我应该用什么顺序渲染脚本才能使其正常工作？

Answer 1

在knockout bundler之前加载app个捆绑包。

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

JavaScript文件加载顺序

1 个答案: