如何在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？

回答

相關問題