3

我是新手 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);
        }

    }
4

1 回答 1

15

我猜你正在关注本教程。

你有几个错误。首先替换：

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

和：

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

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

你的代码的第二个问题是你试图在你的 DOM 准备好之前绑定你的淘汰模型（即你已经在ko.applyBindings(viewModel);包含绑定的实际跨度之前放置了调用）。因此，要么将您的调用包装在 a 中，$(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 个问题与 2 完全无关knockoutjs。所以如果你想学习一些框架，我建议你独立学习。不要混淆技术，否则您会混淆。

因此，请继续浏览 knockoutjs 网站并开始使用静态 HTML 页面的教程。暂时忘记 ASP.NET MVC。忘记实体框架。只需从静态 HTML 页面开始学习框架。这样你会更好地理解它是如何工作的。

于 2012-10-01T18:34:46.610 回答