Search code examples
javascriptjqueryasp.net-mvcknockout.jsknockout-mvc

JavaScript files loading order

I'm trying to make a web app using ASP.NET MVC with KnockoutMVC (knockout.js wrapper).

Unfortunately I can't get the right order of loading for all JS files.

My 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"));
        }
    }

In _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>

In Index.cshtml

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

//some page code with knockout

    @ko.Apply(Model)

I keep getting errors like this:

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

Can someone tell me what order I should render scripts to make it work?

Solution

  • Load knockout bundle before app bundler.

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