Нокаут JS Флажок привязки не обновляется правильно

Question

У меня есть флажок, привязанный к свойству на моем объекте, используемом в моем наблюдаемом массиве. Я не могу корректно обновлять флажки при нажатии. Значение не устанавливается правильно, и флажок не снимается, когда я нажимаю на него. В примерах привязки есть свойство непосредственно в ViewModel, а не свойство объекта, используемого внутри ViewModel. Может ли кто-нибудь пролить свет на то, как заставить это работать?

  <tbody id="StatusGrid" data-bind="foreach:{data: Statuses, as: 'status'}"> 
      <tr data-bind="attr: { index: $index }" style="padding-bottom:5px;"> 
       <td style="padding-bottom:5px;"> 
        <input class="statusID" data-bind="value: status.StatusID, visible: status.ShowID, attr: { name: 'Statuses[' + $index() + '].StatusID'}" /> 
       </td> 
       <td style="padding-bottom:5px;"> 
        <input class="description" data-bind="value: status.Description, attr: { name: 'Statuses[' + $index() + '].Description'}" /> 
       </td> 
       <td style="padding-bottom:5px;"> 
        <input type="checkbox" class="active" data-bind="value: status.Active, checked: status.Active, click: $parent.updateCheckbox, attr: { name: 'Statuses[' + $index() + '].Active'}" /> 
       </td> 
       <td style="padding-bottom:5px;"> 
        <input type="button" data-bind="click: $parent.removeStatus, visible: status.IsNew" value="Remove" /> 
       </td> 
      </tr> 
     </tbody> 


//////KNOCKOUT////// 
var _viewModel = new ViewModel(); 

function status(index) { 
    this.StatusID = ko.observable(''); 
    this.Description = ko.observable(''); 
    this.Index = ko.observable(index); 
    this.Active = ko.observable(true); 
    this.ShowID = ko.observable(false); 
    this.IsNew = ko.observable(true); 
    return this; 
}; 

function ViewModel() { 
    var self = this; 

    self.Statuses = ko.observableArray(convertJSONToKoObservableObject()); 
    //self.Statuses.push(new status(0)); 

    //Ko Functions 
    self.addStatus = function() { 
     var index = $('#StatusGrid tr:last').attr('index'); 
     self.Statuses.push(new status(index + 1)); 
    } 

    self.removeStatus = function (row) { 
     self.Statuses.remove(row); 
    } 

    self.updateCheckbox = function (row) { 
     var index = row.Index(); 
     var checkbox = $('#StatusGrid tr').eq(index).find('[type=checkbox]'); 
     if ($(checkbox).is(":checked")) { 
      $(checkbox).attr('checked', false); 
      row.Index(false); 
     } 
     else { 
      $(checkbox).attr('checked', true); 
      row.index(true); 
     } 
     return true; 
    } 
} 

//FUNCTION 
function convertJSONToKoObservableObject() { 
    var json = JSON.parse('@Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.Statuses))'); 
    var ret = []; 
    var index = 0; 
    $.each(json, function (i, obj) { 
     var newOBJ = new status(index); 
     newOBJ.StatusID = ko.observable(obj["StatusID"]); 
     newOBJ.Description = ko.observable(obj["Description"]); 
     newOBJ.Active = ko.observable(obj["Active"]); 
     newOBJ.Index = ko.observable(index); 
     newOBJ.ShowID = ko.observable(false); 
     newOBJ.IsNew = ko.observable(false); 
     ret.push(newOBJ); 
     index++; 
    }); 

    return ret; 
} 

//BIND UP! 
ko.applyBindings(_viewModel); 

Answer 1

Я думаю, может быть величина связывания мешая проверенное связывания

<input type="checkbox" class="active" data-bind="value: status.Active, checked: status.Active, click: $parent.updateCheckbox, attr: { name: 'Statuses[' + $index() + '].Active'}" /> 

Попробуйте с проверенными обязательными только я считаю, Нокаут сохраняет наблюдаемым в синхронизации

<input type="checkbox" class="active" data-bind="checked: status.Active, click: $parent.updateCheckbox, attr: { name: 'Statuses[' + $index() + '].Active'}" /> 

Если Я правильно понимаю ваш код, я также сомневаюсь, что вам нужно проверить/снять флажок с помощью jQuery, нокаут должен обрабатывать проверку и обновление наблюдаемого автоматически, используя проверенное связывание

Answer 2

После внесения изменений и затем настройки html далее для сообщения mvc. Ниже работ для проверки связывания и связывающее значение для поста назад :)

     <input type="checkbox" class="active" data-bind="checked: status.Active" /> 
        <input type="hidden" data-bind="value: status.Active, attr: { name: 'Statuses[' + $index() + '].Active'}"> 

Answer 3

Вы можете использовать при связывании, так:

<td style="padding-bottom:5px;"> 
<span data-bind="if: status.Active"> 
    <input type="checkbox" data-bind="value: status.Active" checked/> 
</span> 
<span data-bind="ifnot: status.Active"> 
    <input type="checkbox" data-bind="value: status.Active" /> 
</span> 
</td> 

Это может быть не очень, но это работает вместо используя 2x двухстороннее связывание вместе (а именно, значение и проверочное связывание вместе), что, похоже, не дает вам типичного поведения флажка. ...