Question

我正在尝试淘汰赛，我对javascript有了相当基本的了解。我为此设置了一个基本的ASP.NET MVC 3应用程序。这是我在Home / Index.cshtml视图中设置的片段：

@if(false)
{
    <script src="../../Scripts/jquery-1.6.3.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
}

@{
    ViewBag.Title = "Home Page";
}

<script type="text/javascript">
    var entryDataViewModel = {
        registration: ko.observable("Registration"),
        registeredName: ko.observable("Name"),
        entryClass: ko.observable("Junior")
    };

    ko.applyBindings(entryDataViewModel);
</script>

<h2>@ViewBag.Message</h2>
<p>
    Registration: <span data-bind="text: registration"></span><br />
    Name: <span data-bind="text: registeredName"></span><br />
    Class: <span data-bind="text: entryClass"></span><br />

    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

出于一些奇怪的原因，没有显示任何内容，甚至没有显示默认值。如果我通过Firebug进行调试，ViewModel也会将属性显示为空。我在这里错过了什么吗？

非常感谢，达尼。

ADDED：_Layout.cshtml的内容 - 除了添加淘汰赛和使用jquery 1.6.3之外，它都是标准的东西。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/knockout-1.3.0beta.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.6.3.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

Answer 1

使用$(document).load(function(){：

<script type='text/javascript'> 
  //<![CDATA[ 
  $(document).load(function(){
  var entryDataViewModel = {
        registration: ko.observable("Registration"),
        registeredName: ko.observable("Name"),
        entryClass: ko.observable("Junior")
    };

    ko.applyBindings(entryDataViewModel);
  });
  //]]> 
  </script>

看看：http://jsfiddle.net/S8Rh5/ - 它运作正常。

Answer 2

我在上面投票的答案只在我在普通网页上尝试时才起作用 - 而不是在我在MVC视图中尝试时。事实证明我把脚本块放在了错误的位置。在处理页面元素之后，我将它移动到视图的末尾。另一个选项是将它包装在$（document）.ready（）中，然后你可以把包含ViewModel的脚本块放到你想要的任何地方调用ko.applyBindings（）...

ko.observable属性中的默认值未显示

2 个答案: