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

Question

我是新手knockout.js.另外我是asp.net mvc 3的上层中间人.我真的想学习如何在mvc 3剃须刀中使用淘汰赛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);
        }

    }

Answer 1

我想你正在学习本教程.

你有几个错误.首先替换:

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);在包含绑定的实际跨度之前放置了调用).因此,要么将您的调用包裹起来,要么将$(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>

因此,您可以看到您遇到的两个问题与严格无关knockoutjs.因此,如果您想学习一些框架,我会建议您独立学习它.不要混淆技术,否则你会混淆.

因此,请继续浏览knockoutjs站点并开始处理静态HTML页面的教程.暂时忘掉ASP.NET MVC.忘记实体框架.只需从静态HTML页面开始学习框架.这样您就可以更好地理解它是如何工作的.