ASP.NET MVC Knockout Binding не работает

Question

Я работаю с Mvc4/bootstrap 3.2 и нокаутом 3.2. Проблема. У меня есть форма, которая имеет. текстовое поле и кнопка, при нажатии кнопки Я передаю значение текстового поля контроллеру. После получения данных от контроллера привязка viewModel с таблицей. Но ни данные не обновляются в таблице, ни обновленная модель mvc. Я проверяю, что при отправке данных.

ViewModel: Я Пытался ViewMoel двух способов

var SibviewModel=null; 
    $(function() { 
     var model = @Html.Raw(Json.Encode(Model)); 
     SibviewModel = ko.mapping.fromJS(model); 
     ko.applyBindings(SibviewModel); 
    }); 

function GetMatchingSibling(_Id) { 
     var url = "/Home/GetStudentSiblingDetails/?Id=" + _Id; 
     $("#myModal").modal('show'); 
     $.ajax({ 
      url: url, 
      cache: false, 
      type: "GET", 
      success: function (data) { 
       try { 
        $(data.data).each(function (index, element) { 
         SibviewModel.SibviewModel.push(element); 
        }); 
        ko.applyBindings(viewModel); 

       } catch (e) { 
        $(".alert-dismissable") 
        .alert('show') 
        .addClass("alert-danger") 
        .append("<h3>"+e+"</h3>"); 

       } 
       finally { 
        $("#myModal").modal('hide'); 
       } 


      }, 
      error: function (reponse) { 
       alert("error : " + data.error); 
       $("#myModal").modal('hide'); 
      } 
     }); 
    } 

Тогда я написал MVC Razor вида

<tbody data-bind="foreach: lookupCollection"> 
      @foreach (var item in Model.LinkedSiblings) 
      { 
       string dobval = ""; 
       if (Model.DOB.HasValue) 
       { 
        dobval = Model.DOB.Value.ToString("dd-MM-yyyy"); 
       } 

       @Html.HiddenFor(x => item.PhoneNo, new { @Name = "LinkedSiblings[" + item.DynamicControlId + "].PhoneNo", @Value = item.PhoneNo, data_bind = "value: PhoneNo" }) 
       @Html.HiddenFor(x => item.Email, new { @Name = "LinkedSiblings[" + item.DynamicControlId + "].Email", @Value = "santokh.hcl@hmail.com", data_bind = "value: Email" }) 
       @Html.HiddenFor(x => dobval, new { @Name = "LinkedSiblings[" + item.DynamicControlId + "].DOB", @Value = dobval, data_bind = "value: DOB" }) 
       @Html.HiddenFor(x => item.LastName, new { @Name = "LinkedSiblings[" + item.DynamicControlId + "].LastName", @Value = item.LastName, data_bind = "value: LastName" }) 
       <tr> 
        <td data-bind="text: StudentId">@Html.TextBoxFor(x => item.StudentId, new { style = "max-width:100px;", @Name = "LinkedSiblings[" + item.DynamicControlId + "].StudentId", @Value = item.StudentId, data_bind = "value: StudentId" }) 
        </td> 
        <td>@Html.TextBoxFor(x => item.AdmissionId, new { style = "max-width:100px;", @Name = "LinkedSiblings[" + item.DynamicControlId + "].AdmissionId", @Value = item.AdmissionId, data_bind = "value: AdmissionId" }) 
        </td> 
        <td>@Html.TextBoxFor(x => item.FirstName, new { style = "max-width:100px;", @Name = "LinkedSiblings[" + item.DynamicControlId + "].FirstName", @Value = item.FirstName, data_bind = "value: FirstName" }) 
        </td> 
        <td>@Html.TextBoxFor(x => item.ClassId, new { style = "max-width:100px;", @Name = "LinkedSiblings[" + item.DynamicControlId + "].ClassId", @Value = item.ClassId, data_bind = "value: ClassId" }) 
        </td> 
       </tr> 

      } 
      @Html.EditorFor(x => Model.LinkedSiblings) 
     </tbody> 
    </table> 

Ни View не обновляются с значением не значения, полученными по методу контроллера, когда представить форма.

Answer 1

Есть две проблемы в вызове ko.applyBindings в вашем AJAX обратного вызова:

try { 
    $(data.data).each(function (index, element) { 
     SibviewModel.SibviewModel.push(element); 
    }); 
    ko.applyBindings(viewModel); 
} 

Первая проблема в том, что вы передаете переменную viewModel, которая не объявлена ​​(я не могу видеть декларацию) или содержит старый данные (вы обновили данные в SibviewModel.SibviewModel)

Вторая проблема заключается в том, что вы не должны звонить ko.applyBindings. Это вызовет исключение в нокауте 3.x - вы не можете привязать две модели view к одному элементу. Также это непонимание базовой концепции knockout.js и привязки данных. Если вы изменяете модель, изменения автоматически распространяются на представление, вам не нужно вызывать какую-либо функцию ... ko.applyBindings используется только для инициализации новой привязки. Это не ваше дело, у вас есть существующее связывание, и вы просто хотите обновить модель.

Может быть, может быть еще ошибки, я не проверял весь код ...

BTW там у вас также проблемы с производительностью, проверить эту статью - http://www.knockmeout.net/2012/04/knockoutjs-performance-gotcha.html

Answer 2

var viewModel = { 
     lookupCollection: ko.observableArray() 
    }; 
    var SibviewModel=null; 
    $(function() { 
     var model = @Html.Raw(Json.Encode(Model)); 
     SibviewModel = ko.mapping.fromJS(model); 
     ko.applyBindings(SibviewModel); 
    }); 

    function GetMatchingSibling(_Id) { 
     var url = "/Home/GetStudentSiblingDetails/?Id=" + _Id; 
     $("#myModal").modal('show'); 
     $.ajax({ 
      url: url, 
      cache: false, 
      type: "GET", 
      success: function (data) { 
       try { 
        $(data.data).each(function (index, element) { 
         SibviewModel.LinkedSiblings.push(element); 
        }); 
        ko.applyBindings(LinkedSiblings); 

       } catch (e) { 
        $(".alert-dismissable") 
        .alert('open') 
        .removeClass('alert-warning') 
        .addClass("alert-danger") 
        .append("<h3>"+e+"</h3>"); 
       } 
       finally { 
        $("#myModal").modal('hide'); 
       } 
      }, 
      error: function (reponse) { 
       alert("error : " + data.error); 
       $("#myModal").modal('hide'); 
      } 
     }); 
    } 

: Jookyn. Я добавил полный JS-код, который я использовал для обновления списка. В месте поиска я использовал «LinkedSiblings» для цикла foreach на таблице