淘汰赛在 MVC4 项目中不起作用答案

【问题标题】：knockout not working in MVC4 project淘汰赛在 MVC4 项目中不起作用
【发布时间】：2013-02-12 05:08:30
【问题描述】：

我的 Index.cshtml 文件中有以下内容（来自淘汰网站）：

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

<script type="text/javascript">
    // Here's my data model
    var ViewModel = function (first, last) {
        this.firstName = ko.observable(first);
        this.lastName = ko.observable(last);

        this.fullName = ko.computed(function () {
            // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
            return this.firstName() + " " + this.lastName();
        }, this);
    };

    ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work
</script>

我的布局有这一行：

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

在 bundler config 中配置正确：

bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
                "~/Scripts/Libraries/knockout-2.2.1.js"));

Chrome 看到该文件，而 VS 正在给我智能感知，所以我不确定发生了什么。任何淘汰功能都不起作用。

我在 MVC 之外进行了测试（仅使用 html/css），它运行良好。知道发生了什么吗？

编辑：我尝试使用没有捆绑器的直接引用，但它仍然不起作用：

<script type="text/javascript" src="~/Scripts/Libraries/knockout-2.2.1.js"></script>

我收到来自 chrome 的错误：

Uncaught ReferenceError: ko is not defined

【问题讨论】：

您能发布您的~/bundles/bootstrap 捆绑配置吗？你可以试着把你的脚本放在@section scripts { }
谢谢 - 是的，一会儿
抱歉，复制了错误的行。它在我的页面中被淘汰了。
您是否尝试将您的<script> 放在脚本部分@section scripts { } 中？你的浏览器JS控制台有错误吗？
是的，我确实将其放入脚本中{}，但无济于事。 Chrome 在其控制台中给我“未捕获的 ReferenceError：ko 未定义”...

标签： asp.net-mvc-3 asp.net-mvc-4 knockout.js

【解决方案1】：

你能发布一些来自 chrome 或 firebug 的 JS 控制台错误吗？看起来像是淘汰赛中缺少参考。

编辑：将您的脚本放在视图的末尾！另一件事是，knockout 的引用必须保持在 jquery 的引用之下，因为它是依赖的。

编辑：注册淘汰赛

bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
                    "~/Scripts/knockout-{version}.js"));

在你的视图中渲染它

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

【讨论】：

【解决方案2】：

在 JS 文件中包含您的 javascript 代码并在敲除后呈现它

像这样：

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

【讨论】：

【解决方案3】：

我通过删除 Index.cshtml 文件末尾的脚本行解决了我的问题：

<script src="~/Scripts/ConfigGroup.js"></script>

并将其替换为：

@section Scripts {
    @Scripts.Render("~/Scripts/ConfigGroup.js")
}

我猜脚本部分的加载时间与包含的时间不同。

【讨论】：