Кнопка радио не изменяется после вызова ajax (нокаут js)

Question

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

result.IsActive возвращает true или false. Я также пытаюсь установить result.IsActive (true) по умолчанию в ответе ajax, но он не работает. Где я ошибаюсь? Заранее спасибо

var self = this; 
 
     self.DealerId = ko.observable(); 
 
     self.DealerName = ko.observable(); 
 
     self.Gender = ko.observable(); 
 
     self.Dealers = ko.observableArray(vm.Dealers()); 
 

 
      $.ajax({ 
 
       url: '@Url.Action("EditDealer", "Dealer")', 
 
       cache: false, 
 
       type: 'GET', 
 
       contentType: 'application/json', 
 
       data: { 'id': id }, 
 
       success: function (result) { 
 
        self.DealerId(result.DealerId); 
 
        self.DealerName(result.DealerName); 
 
        self.IsActive = ko.observable(result.IsActive); 
 
        $('#basic').modal('show'); 
 
       } 
 
      });

<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true"> 
 
\t <div class="modal-dialog"> 
 
\t \t <div class="modal-content"> 
 
\t \t \t <div class="modal-header" style="background-color:#4d90fe;padding-top:10px;padding-bottom:10px"> 
 
\t \t \t \t <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> 
 
\t \t \t \t <h4 class="modal-title" style="color:white">Update Dealer Information</h4> 
 
\t \t \t </div> 
 
\t \t \t <div class="modal-body"> 
 
       <div class="row"> 
 
        <div class="col-md-12"> 
 
         <div class="form-group"> 
 
          <label class="control-label col-md-3">Dealer Name</label> 
 
          <div class="col-md-9"> 
 
           <input class="form-control" data-bind="value:DealerName" required="required" 
 
            data-parsley-required-message="Dealer name is required"></input> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="row" style="margin-top:10px"> 
 
        <div class="col-md-12"> 
 
         <div class="form-group"> 
 
          <label class="control-label col-md-3">Dealer Status</label> 
 
          <div class="col-md-9"> 
 
           <label style="padding-left:0"><input type="radio" name="status" value="true" data-bind="checked: IsActive">Active</label> 
 
           <label ><input type="radio" name="status" value="false" data-bind="checked: IsActive">Inactive</label> 
 
          </div>        
 
         </div> 
 
        </div> 
 
       </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="modal-footer" style="margin-top:0;padding-top:10px;padding-bottom:10px"> 
 
\t \t \t \t <button type="button" id="cancelSave" class="btn default" data-dismiss="modal" >Cancel</button> 
 
\t \t \t \t <button type="button" id="save" class="btn blue">Save</button> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

Вам нужно назначить равный name оба вашего <input type="radio">, чтобы позволить браузеру понять, что они связаны между собой.

Answer 2

Кажется, как будто вы инициализируете свойство self.IsActive вашего ko-viewmodel в обратном вызове ajax-success. Это означает, что ваше наблюдаемое свойство IsActive будет создано только тогда, когда ajax будет завершен. Но вызов ajax является асинхронным. Итак, если вы привязываете viewmodel без созданного объекта self.IsActive, вы получите сообщение об ошибке ko. (проверьте консоль браузеров). Это не лучший способ сделать ajax-вызовы в конструкторе viewmodel.

Попытка объявить свойство перед Аяксом, как это:

var self = this; 
    self.DealerId = ko.observable(); 
    self.DealerName = ko.observable(); 
    self.Gender = ko.observable(); 
    self.Dealers = ko.observableArray(vm.Dealers()); 
    self.IsActive = ko.observable(false); 

     $.ajax({ 
      url: '@Url.Action("EditDealer", "Dealer")', 
      cache: false, 
      type: 'GET', 
      contentType: 'application/json', 
      data: { 'id': id }, 
      success: function (result) { 
       self.DealerId(result.DealerId); 
       self.DealerName(result.DealerName); 
       self.IsActive(result.IsActive); 
       $('#basic').modal('show'); 
      } 
     }); 

В этом случае вашей радиостанция будет по умолчанию зарегистрированного значения (неактивный), пока не завершится Аякс. Сразу после завершения ajax он станет правильным. Лучший способ избежать этого временного несогласованности данных - загрузить все данные до, создавая viewmodel и передавая все ajax-данные как аргумент конструктора. Этот подход предусматривает, что ko-viewmodel будет иметь фактические данные в момент привязки. (что-то вроде этого:

$.ajax({ 
      url: '@Url.Action("EditDealer", "Dealer")', 
      cache: false, 
      type: 'GET', 
      contentType: 'application/json', 
      data: { 'id': id }, 
      success: function (result) { 
       //create your viewmodel inside the ajax-succcess and 
       //populate it with data 
       var myViewModel = new MyViewModel(result); 
       //and apply ko-binding here, after creating the viemodel 
       $('#basic').modal('show'); 
      } 
     }); 
function MyViewModel(ajaxData){ 
var self = this; 
    self.DealerId = ko.observable(ajaxData.DealerId); 
    self.DealerName = ko.observable(ajaxData.DealerId); 
    self.Gender = ko.observable(ajaxData.DealerName); 
    self.IsActive = ko.observable(ajaxData.IsActive); 
    self.Dealers = ko.observableArray(vm.Dealers()); 
}