創建KnockoutJS模型從ASP.NET MVC複雜模型

我想從asp.net MVC模型使用ko.mapping.fromJS（）方法創建knockout viewModel，但我的表單沒有填充值。創建KnockoutJS模型從ASP.NET MVC複雜模型

鑑於我創建的腳本看起來像這樣：

<script type="text/javascript"> 
      var tmp = @Html.Raw(Model.ToJson()); 
      var viewModel = ko.mapping.fromJS(tmp); 
      ko.applyBindings(viewModel); 
    </script>

@ Html.Raw（Model.ToJson（）返回價值

{"id":1, 
"surveyCode":null, 
"title":"Życie", 
"description":"Ankieta, w której zadawane będą pytania na temat codziennego życia ", 
"dateStart":"2013-12-12T00:00:00", 
"dateEnd":"2014-12-30T00:00:00", 
"createDate":"2014-01-07T03:23:16.053", 
"lastModification":"2014-01-07T03:23:16.053", 
"isActive":false, 
"questions":[{"id":1, 
      "surveyID":1, 
      "content":"Co jesz na śniadanie?", 
      "tips":"wybierz jedną odpowiedź", 
      "questionType":1, 
      "isRequired":true, 
      "answers": [{"id":1, 
           "questionID":1, 
           "answerContent":"Jajecznicę", 
           "isOpenAnswer":false}, 
         {"id":2, 
           "questionID":1, 
           "answerContent":"Kiełbaski", 
           "isOpenAnswer":false}, 
         {"id":3, 
           "questionID":1, 
           "answerContent":"Płatki na mleku", 
           "isOpenAnswer":false}, 
         {"id":4, 
           "questionID":1, 
           "answerContent":"Inne", 
           "isOpenAnswer":true}]}, 
      {"id":2, 
      "surveyID":1, 
      "content":"Czym się zajmujesz w życiu?", 
      "tips":"napisz krótką historię", 
      "questionType":3, 
      "isRequired":true, 
      "answers":[]}]}

但是當我要綁定 '標題'財產<span><span data-bind="text:title"></span>它不工作當我在firefox中運行我的應用程序，並打開螢火蟲腳本控制檯和設置breakpiont行var tmp = @Html.Raw(Model.ToJson());返回正確的值，按F10去下一行var viewModel = ko.mapping.fromJS(tmp);，最後按F10，什麼也沒有發生，腳本不執行下一行ko.applyBindings(viewModel);。

這是我的問題。是否有可能使用基因敲除映射插件自動映射我的mvc模型？或者也許我應該做一些manualy工作人員來映射mvc模型來淘汰viewModel。

我在尋找這個答案的網站： link1 和 stackowerflow 但也許我不明白這個職位。

編輯

我的看法是這樣的：

@using Inżynierka.Extensions 
@model Inżynierka.Models.Survey 

@{ 
    ViewBag.Title = "Create"; 
} 


@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <h4>SurveyAnswer</h4> 
     <hr /> 
     @Html.ValidationSummary(true) 

     Title: <span data-bind="text:title"></span> 


    </div> 
} 


@section Scripts { 
     <script src="../../Scripts/jQuery.tmpl.min.js" type="text/javascript"></script> 
     <script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script> 
     <script src="../../Scripts/knockout.validation.js"></script> 
     <script src="../../Scripts/knockout.knockout.mapping-latest.js"></script> 
     <script type="text/javascript"> 
      var tmp = @Html.Raw(Model.ToJson()); 
      var viewModel = ko.mapping.fromJS(tmp); 
      ko.applyBindings(viewModel); 
     </script> 
    @Scripts.Render("~/bundles/jqueryval") 
}

編輯2

這是我的網頁HTML SOURSE：

<!DOCTYPE html> 
<html> 
<head> 
    <script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js'></script> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Create</title> 
    <link href="/Content/bootstrap.css" rel="stylesheet"/> 
<link href="/Content/site.css" rel="stylesheet"/> 

    <script src="/Scripts/modernizr-2.6.2.js"></script> 


</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="/">Ankietyy</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="/Surveys">Moje Ankiety</a></li> 
        <li><a href="/">Strona Gł&#243;wna</a></li> 
        <li><a href="/Home/About">O Projekcie</a></li> 
        <li><a href="/Home/Contact">Kontakt</a></li> 
       </ul> 
       <form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="fWDZFmyGqJyU3ATUf2IbHDdkbo22bzObUMwUfxfqwXIiqGvRYzMhApWS3I5GkkHnZD7ieDxLfh84s2-prLDtSGeE6_D7p7cT-fmQBszeM06p-fZ7RzhOPn0P8EDftLRwT8YQA8t2U56dlLX_lx3G4Q2" /> <ul class="nav navbar-nav navbar-right"> 
     <li> 
      <a href="/Account/Manage" title="Manage">Witaj Bartek!</a> 
     </li> 
     <li><a href="javascript:document.getElementById('logoutForm').submit()">Wyloguj się</a></li> 
    </ul> 
</form> 
      </div> 
     </div> 
    </div> 
    <div class="container body-content"> 




<form action="/SurveyAnswer/CompleteSurvey/1" method="post"><input name="__RequestVerificationToken" type="hidden" value="KOALGZbw0WhFlBV4LHx530Oen59aBWF62b6s58GIUikx3A62uhcAi3-74auJpLtI4fYj9kmcPjlgNu1TeuNrYukpFlll1cGCOIcjjewtFou4M9C3_bHDFk7UoZk_tKpw7SxcXa3UbgwIj4ZhCRM6_g2" /> <div class="form-horizontal"> 
     <h4>SurveyAnswer</h4> 
     <hr /> 


     Title: <span data-bind="text:title"></span> 


    </div> 
</form><script type="text/javascript"> 
      var tmp = {"id":1,"surveyCode":null,"title":"Życie","description":"Ankieta, w której zadawane będą pytania na temat codziennego życia ","dateStart":"2013-12-12T00:00:00","dateEnd":"2014-12-30T00:00:00","createDate":"2014-01-07T03:23:16.053","lastModification":"2014-01-07T03:23:16.053","isActive":false,"questions":[{"id":1,"surveyID":1,"content":"Co jesz na śniadanie?","tips":"wybierz jedną odpowiedź","questionType":1,"isRequired":true,"answers":[{"id":1,"questionID":1,"answerContent":"Jajecznicę","isOpenAnswer":false},{"id":2,"questionID":1,"answerContent":"Kiełbaski","isOpenAnswer":false},{"id":3,"questionID":1,"answerContent":"Płatki na mleku","isOpenAnswer":false},{"id":4,"questionID":1,"answerContent":"Inne","isOpenAnswer":true}]},{"id":2,"surveyID":1,"content":"Czym się zajmujesz w życiu?","tips":"napisz krótką historię","questionType":3,"isRequired":true,"answers":[]},{"id":14,"surveyID":1,"content":"Pytanie końcowe","tips":"napisz","questionType":1,"isRequired":true,"answers":[{"id":9,"questionID":14,"answerContent":"test","isOpenAnswer":false},{"id":10,"questionID":14,"answerContent":"test2","isOpenAnswer":false},{"id":11,"questionID":14,"answerContent":"test3","isOpenAnswer":false}]}],"surveyAnswers":[],"codeForUsers":[]}; 
      var viewModel = ko.mapping.fromJS(tmp); 
      ko.applyBindings(viewModel); 
</script> 



     <hr /> 
     <footer> 
      <p>&copy; 2014 - My ASP.NET Application</p> 
     </footer> 
    </div> 

    <script src="/Scripts/jquery-2.0.3.js"></script> 

    <script src="/Scripts/bootstrap.js"></script> 
<script src="/Scripts/respond.js"></script> 


    <script src="../../Scripts/jQuery.tmpl.min.js" type="text/javascript"></script> 
    <script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script> 
    <script src="../../Scripts/knockout.validation.js"></script> 
    <script src="../../Scripts/knockout.mapping-latest.js"></script> 

    <script src="/Scripts/jquery.validate.js"></script> 
<script src="/Scripts/jquery.validate.unobtrusive.js"></script> 



<!-- Visual Studio Browser Link --> 
<script type="application/json" id="__browserLink_initializationData"> 
    {"appName":"Firefox","requestId":"9f8e517696004299808eb3caccb0e136"} 
</script> 
<script type="text/javascript" src="http://localhost:11897/dc47e85290da49019e6425ddd16f962a/browserLink" async="async"></script> 
<!-- End Browser Link --> 

</body> 
</html>

回答我的問題

視圖應該看起來像這樣：

@using Inżynierka.Extensions 
@model Inżynierka.Models.Survey 

@{ 
    ViewBag.Title = "Create"; 
} 


@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <h4>SurveyAnswer</h4> 
     <hr /> 
     @Html.ValidationSummary(true) 

     Title: <span data-bind="text:title"></span> 


    </div> 
} 



@section Scripts { 
    <script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script> 
    <script src="../../Scripts/knockout.mapping-latest.js"></script> 
    <script type="text/javascript"> 
      var tmp = @Html.Raw(Model.ToJson()); 
      var viewModel = ko.mapping.fromJS(tmp); 
      ko.applyBindings(viewModel); 
    </script> 

    @Scripts.Render("~/bundles/jqueryval") 
}

感謝大家的回覆，專爲@VolodymyrBilyachat，其意見是最相關的。

來源

2014-01-12 Bartłomiej Zalewski

你能分享你的觀點嗎？ –

@Volodymyr Bilyachat我說我查看張貼 –

移動模板腳本下方的淘汰賽腳本，然後換你的視圖模型中的document.ready功能 –

後，那麼你發佈源，那麼其他的想法是什麼它可能是某些腳本是相互矛盾的，嘗試刪除腳本只留下那些淘汰賽

來源

2014-01-12 13:34:41

ehhh ...我相信你是正確的，但它仍然沒有顯示我的'標題'。梅比，我應該放棄片刻映射：P。謝謝你的回覆。 –

@ user3187246從來沒有放棄讓我們修復它，你可以請渲染頁面，併發送給我HTML（查看源代碼） –

我觀察到，當我想調試它在螢火蟲腳本控制檯var viewModel = ko.mapping.fromJS(tmp);這使得Firefox停止工作，並沒有回答。 –

-1

對於複雜型號我不相信映射和簡單，我自己解析json，並通過循環，ifs等來填充模型。我認爲，這不是最糟糕的解決方案，因爲調試和修復數據變得更簡單。

來源

2014-01-12 15:52:41 Fka

包裝你淘汰賽視圖模型中的document.ready功能

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

另外請注意，您的視圖模型是不是在這一點上一個真正的視圖模型，以便考慮使用包含ko.observable屬性視圖模型'myData'或東西來保存你的數據，然後申請綁定

來源

2014-01-12 15:54:58

創建KnockoutJS模型從ASP.NET MVC複雜模型

回答

相關問題