如何在 MVC 3 Razor 中使用 knockout.js？答案

【问题标题】：How to use knockout.js in MVC 3 Razor?如何在 MVC 3 Razor 中使用 knockout.js？
【发布时间】：2012-09-22 14:50:46
【问题描述】：

我是新手 knockout.js。我也是 asp.net mvc 3 中的上级中间人。我真的很想学习如何在 mvc 3 razor 中使用淘汰赛 js？但下面的代码不起作用也返回给我空的总价。没有错误。请帮忙，谢谢...

型号：


  public class GiftModel
    {
        public string Title { get; set; }
        public double Price { get; set; }
    }

查看：


@using System.Web.Script.Serialization;
@model IEnumerable<knockout1.Models.GiftModel>
@{
    ViewBag.Title = "Index";
}

<script src="/Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
    var initialData = @(new JavaScriptSerializer().Serialize(Model));
    var viewModel = {
    gifts : ko.observableArray(initialData)
};

ko.applyBindings(viewModel);
</script>
<h2>Index</h2>

<p>You have asked for <span data-bind="text: gifts().length"> </span> gift(s)</p>

控制器：


   public class TestController : Controller
    {
        //
        // GET: /Test/

        public ActionResult Index()
        {
            var initialState = new[] {
                                     new GiftModel { Title = "Tall Hat", Price = 49.95 },
                                     new GiftModel { Title = "Long Cloak", Price = 78.25 }
                                    };
            return View(initialState);
        }

    }

【问题讨论】：

标签： asp.net-mvc-3 mvvm razor knockout.js

【解决方案1】：

我猜你正在关注this tutorial。

您有几个错误。第一次替换：

var initialData = @(new JavaScriptSerializer().Serialize(Model));

与：

var initialData = @Html.Raw(Json.Encode(Model));

这可确保您的模型已正确进行 JSON 编码。在原始文章中，Steven Sanderson 使用的是 WebForms 视图引擎，但您似乎使用的是 Razor 视图引擎。因此，请确保您相应地调整您的语法（不要忘记 @ razor 函数会自动对输出进行 html 编码，这与 <%= WebForms 语法相反）。

你的代码的第二个问题是你试图在你的 DOM 准备好之前绑定你的淘汰模型（即你在包含绑定的实际 span 之前放置了 ko.applyBindings(viewModel); 调用）。因此，要么将您的呼叫包装在 $(document).ready 中，要么将您的脚本放在文档末尾，就在关闭您的 </body> 标记之前（推荐）。

另外，我建议您使用 url 帮助程序来引用您的脚本，不要只对这些 url 进行硬编码，一旦您在 IIS 中发布，您的应用程序就会中断：

@model IEnumerable<GiftModel>

<h2>Index</h2>

<p>You have asked for <span data-bind="text: gifts().length"> </span> gift(s)</p>

<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script type="text/javascript">
    var initialData = @Html.Raw(Json.Encode(Model));
    var viewModel = {
        gifts : ko.observableArray(initialData)
    };

    ko.applyBindings(viewModel);
</script>

因此，您可以看到您遇到的 2 个问题与 knockoutjs 完全无关。所以如果你想学习一些框架，我建议你独立学习。不要混淆技术，否则您会混淆。

所以继续浏览 knockoutjs 网站并开始使用静态 HTML 页面的教程。暂时忘记 ASP.NET MVC。忘记实体框架。只需从静态 HTML 页面开始学习框架。这样您将更好地了解它的工作原理。

【讨论】：