드롭 다운이 KnockoutJS 및 Ajax로 채워지지 않습니다.

Question

json을 반환하는 ajax 소스의 knockoutjs를 사용하여 드롭 다운 목록을 채우려고합니다. 이 선택 항목은 다른 드롭 다운 값을 변경할 때 업데이트되어야합니다. 이건 내 HTML입니다

var self = this, 
    getClientsRoute = "GetContactsFromCompany"; 

self.selectedCompany = ko.observable(); 
self.contacts = ko.computed(function getContactsFromCompany() { 
    var companyId = self.selectedCompany(); 
    if (companyId != "" && companyId != undefined) { 
     return $.ajax(getClientsRoute, { 
      type: 'GET', 
      data: 'companyId=' + companyId 
     }); 
    } else { 
     return []; 
    }    
}); 

:

이

내 모델입니다

<select class="form-control" name="Client.Id" data-bind="options: contacts,optionsText: 'Name',optionsValue: 'Id'"> 
</select> 

그리고 이것은 (미안은 .NET MVC를 사용) JSON 문자열을 반환 내 방법 :

public JsonResult GetContactsFromCompany(int companyId) 
    { 
     var contacts = _db.Contacts.Where(c => c.CompanyId == companyId).Select(c => 
      new 
      { 
       Id = c.Id.ToString(), 
       Name = c.Name.ToString() 
      }).ToList(); 

     return Json(contacts, JsonRequestBehavior.AllowGet); 
    } 

다른 해결책을 보았습니다. 그러나 '계산 된'방법을 사용하는 것이 더 깨끗하다고 ​​생각합니다. 모든 것이 정상적으로 작동하는 것으로 보입니다. json 데이터를 받지만 드롭 다운이 채워지지 않습니다. 서버에서 반환 된 json 문자열을 복사하고 observableArray를 작성하여 완벽하게 작동하므로 서버에서 데이터를 가져올 때 작동하지 않는 이유는 무엇입니까?

도움 주셔서 감사합니다.

Answer 1

$.ajax의 반환 값은 ajax 호출의 결과가 아닙니다. AJAX 호출 완료시 데이터를 수신하는 success 핸들러를 제공해야합니다 (ajax 호출은 비동기입니다). 즉, 정확히 문제였다

self.companyId = ko.observable(); 
self.contacts = ko.observableArray([]); 
self.companyId.subscribe(function() { self.loadContacts(); }); 

self.loadContacts = function() { 
    $.ajax(getClientsRoute, { 
     type: 'GET', 
     data: 'companyId=' + self.companyId(), 
     success: function(data) { self.contacts(data); } 
    }); 
}