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

我是新手knockout.js。此外，我ama上层intermadiate在asp.net mvc 3.我真的想学习如何使用mvc 3剃须刀淘汰赛js？但下面的代码不工作也返回给我空总价。没有错误。请帮助感谢...如何在MVC 3 Razor中使用knockout.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); 
     } 

    }

来源

2012-10-01 programmerist

我猜你是以下this tutorial。

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

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

有：

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

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

而您的代码的第二个问题是，您在DOM准备好之前试图绑定您的挖空模型（即您已将ko.applyBindings(viewModel);调用放在包含绑定的实际跨度之前）。因此，请将您的电话打包在$(document).ready中，或者在关闭</body>标记（推荐）之前将脚本放在文档的末尾。

此外，我会建议你使用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页面开始学习框架即可。这样你会更好地理解它是如何工作的。

来源

2012-10-01 18:34:46

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

回答

相关问题