无法通过Knockoutjs将MVC模型绑定到剃须刀

Question

我知道这应该非常简单，并且可能会有很多文章和示例。但是，我仍然无法使其工作。如果可以的话，请在发送解决方案之前先尝试运行。此外，如果您使用任何库或扩展名，那么请在您的回复中提及。非常感谢你！！

我的问题 - 无法绑定MVC模型（IEnumerable），由控制器索引返回到PartialView。

控制器

public ActionResult Index() 
{ 
    Books = db.BookDB.ToList(); 
    Authors = db.AuthorDB.ToList(); 
    objBookAuthorViewModel.Authors = Authors; 
    objBookAuthorViewModel.Books = Books; 
    return View("~/Views/Book/Index.cshtml", objBookAuthorViewModel); 
} 

索引视图（调用局部视图）

@model KnockOutJsMvcCreateArticle.Models.BookAuthorViewModel 
@using KnockOutJsMvcCreateArticle.Models 
@using Newtonsoft.Json; 
.... 
<div id="_indexPartialAuthor"> 
    <div class="col-md-10"> 
     <div class="panel panel-danger"> 
      <div class="panel-heading"> 
       <h2 class="panel-title"># of Authors @Model.Authors.Count</h2> 
      </div> 
      <div class="panel-body"> 
       @Html.Partial("~/Views/Shared/_Author.cshtml", Model.Authors) 
      </div> 
     </div> 
    </div> 
</div> 

管窥

@using KnockOutJsMvcCreateArticle.Models 
@using Newtonsoft.Json; 
@model IEnumerable<KnockOutJsMvcCreateArticle.Models.Author> 
.... 
<script src="~/Scripts/Knockout.mapping-2.4.1.js"></script> 

<table class="table table-bordered table-striped table-condensed"> 
    <thead> 
     <tr> 
      <th>@Html.DisplayNameFor(model => model.FirstName)</th> 
      <th>@Html.DisplayNameFor(model => model.LastName)</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: Authors"> 
     <tr> 
      <td data-bind="text:FirstName"></td> <!--Not really using Models--> 
      <td data-bind="text:LastName"></td> 
     </tr> 
    </tbody> 
</table> 

<script type="text/javascript"> 
    var viewModel = @Html.Raw(Json.Encode(Model)); 
    ko.applyBindings(viewModel); 
</script> 

Answer 1

你忘记映射你的MVC模式，淘汰赛，因为淘汰赛的需求模型为所有人创造可观察的属性MVC模型属性：

ko.mapping.fromJS(@Html.Raw(Json.Encode(Model))); 

我觉得跟这个替换你的脚本应该做的伎俩（正如你可能会看到我用的JQuery这里）：

<script type="text/javascript"> 
    $(document).ready(function() { 
     var viewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model))); 
     ko.applyBindings(viewModel); 
    }); 
</script> 

UPDATE添加方法viemodel：

<script type="text/javascript"> 

function viewModel() { 
    this.details = function() { 
     alert("de"); 
    }; 
}; 

$(document).ready(function() { 
    var json = '@Html.Raw(JsonConvert.Encode(Model))'; 

    //Map MVC model: 
    var mvcModel = ko.mapping.fromJSON(json); 

    //create view model that contains extension methods: 
    var myViewModel = new viewModel(); 

    //update this model with properties from MVC model: 
    var koModel = ko.mapping.fromJS(myViewModel, mvcModel); 

    ko.applyBindings(koModel); 
});   
</script>