ASP.NET MVC4 和淘汰赛 js答案

【问题标题】：ASP.NET MVC4 and Knockout jsASP.NET MVC4 和淘汰赛 js
【发布时间】：2013-04-10 16:28:14
【问题描述】：

我试图在我的项目中使用淘汰赛 js，所以我尝试了简单的 Hello World 示例，但我无法让它工作。我创建了一个新的 MVC4 项目，只需复制下面的简单绑定就是我的代码

<script src="~/Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<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);
    };

    $(document).ready(function() {
        ko.applyBindings(new viewModel("Planet", "Earth")); // This makes Knockout get to work
    });
</script>

<div class="liveExample">   
    <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>*@  
</div>

基本上它只会在文本框上显示模型的值。我已经在我的项目中引用了 knockout.js，但它不起作用我还在我的 BundleConfig.cs 中添加了淘汰赛 js

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

我没上班

【问题讨论】：

您是否尝试过将applyBindings 调用放入准备好的文档中？如果 HTML 尚不存在，它可能会失败。
我更新了代码并尝试调用文档准备好，但它仍然没有工作。
它在这个fiddle 中有效，您页面上的其他内容一定有问题。您是否在控制台中遇到任何错误？

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

【解决方案1】：

如果您使用 MVC，请使用 脚本部分 来声明您的 JS。这会将声明移动到 HTML 页面的底部，让 HTML 先呈现。这是我第一次开箱即用的代码版本：

@{
    ViewBag.Title = "Index";
}


<h2>Index</h2>

<div class="liveExample">
    <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>*@
</div>

@section scripts {
    <script src="~/Scripts/knockout-2.2.1.js"></script>
    <script type="text/javascript">
    var viewModel = function (firstName, lastName) {
        this.firstName = ko.observable(firstName);
        this.lastName = ko.observable(lastName);
    };

    $(function () {
        ko.applyBindings(new viewModel("Planet", "Earth"));
    });
    </script>
}

【讨论】：

【解决方案2】：

尝试在您的文档中加入淘汰赛。没有任何错误消息，我唯一能说的是我遇到了类似的问题，这就是我的解决方法。

我的例子让我发疯，因为它在小提琴中工作但在 MVC 中不起作用，我向我的一个设计师朋友提到它，他说它是从他开始制作的，基本上需要在页面开始之前完全下载淘汰赛渲染。

希望对你有帮助

【讨论】：