Question

我正在尝试在我的项目中使用knockout 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"));

我没有工作

Answer 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>
}

Answer 2

尝试将淘汰赛放入您的文件中。没有任何错误消息，我唯一可以说的是我遇到了类似的问题，这就是我的修复。

我的例子让我发疯，因为它在小提琴中起作用，但在MVC中没有，我向我的设计师朋友提到过，他说这是他自己做的，基本上在页面开始之前需要完全下载淘汰渲染。

希望这有帮助

ASP.NET MVC4和Knockout js

2 个答案: