敲除綁定不起作用 - ASP.NET

Question

我有一個更新頁面表單，我嘗試在頁面加載時加載現有的用戶數據。用戶可以修改這些值並點擊提交，這將導致數據被保存。我無法使用Knockout正確綁定數據。調用$.getJSON可以工作，並返回JSON字符串，但由於任何原因UI不會更新。這裏是我的代碼：

//View 
     function companyViewModel() { 
    var self = this; 
    self.CompanyName = ko.observable(); 
    self.TenantID = ko.observable(); 
    self.Name = ko.observable(); 
    self.Host = ko.observable(); 
    self.Status = ko.observable(); 
    self.Title = ko.observable(); 
    self.Theme = ko.observable(); 
    self.Logo = ko.observable(); 
    self.ProfileID = ko.observable(); 
    self.AdminEmail = ko.observable(); 
    self.Address1 = ko.observable(); 
    self.Address2 = ko.observable(); 
    self.City = ko.observable(); 
    self.State = ko.observable(); 
    self.Zip = ko.observable(); 
    self.Country = ko.observable(); 
    self.Phone = ko.observable(); 
}  

var vm = new companyViewModel(); 

$.getJSON('http://localhost:8644/api/TenantAPI/5', 
      function (tempData) 
      { 
       alert(JSON.stringify(tempData)); 
       ko.mapping.fromJSON(tempData, {}, vm); 
      }) 
    .fail(handleModelFailed) 
    .error(handleModelFailed); 

ko.applyBindings(vm); 


function handleModelFailed(jqXHR, txtStatus, error) { 
    alert(txtStatus); 
} 

function populateModel(data) { 
    myJSON = data; 
    alert(JSON.stringify(myJSON)); 
} 

這裏是由瀏覽器收到的JSON：

{"$id":"1","ChangeSets":[],"Departments":[],"Escalations":[],"SLAs":[],"TenantID":1,"Name":"iGoGreen","Host":"iGoGreen.solver.com","Status":"Active","Title":"iGoGreen","Theme":null,"Logo":null,"ProfileID":null} 

API控制器：

// GET api/tenant/5 
    public HttpResponseMessage Get(int id) 
    { 
     //TODO:Remove hard-coded value 
     var tenant = _tenantDataService.GetTenant("iGoGreen.solver.com"); 
     var response = Request.CreateResponse<Tenant>(HttpStatusCode.OK, tenant); 
     response.Headers.Add("Access-Control-Allow-Origin", "*"); 
     return response; 
    } 

最後的HTML摘錄：

<section id="basicInfoSection" class="container data-group col-md-offset-1 col-md-10" style="border: 1px solid silver;"> 
    <h3>Company info:</h3><hr /> 
    <div class="form-group"> 
     <label for="" class="col-sm-2 control-label">Company Name:</label> 
     <div class="col-md-8"> 
      <input type="text" placeholder="Company Name" data-bind="text: CompanyName" class="form-control textbox-with-icon company removeWidthDefault"> 
     </div> 
     <div class="col-sm-1"> 
      <span class="badge" data-placement="right" title="Enter the name of your company">?</span> 
     </div> 
    </div> 
    <hr /> 
    <div class="form-group"> 
     <label for="" class="col-sm-2 control-label">Web address:</label> 
     <div class="col-md-8"> 
      <span class="form-control-static"> 
       <b class="text-highlighted example-url-lg"> 
        http:// <input type="text" data-bind="value: Host" class="inline form-control " style="width: 150px;"> 
        .localhost.net 
       </b> 
      </span> 
     </div> 
     <div class="col-sm-1"> 
      <span class="badge" data-placement="right" title="Enter the URL you want to use to access your company's localhost.net portal">?</span> 
     </div> 
    </div> 
    <hr /> 
</section> 

另外，我有e嘗試了幾種方法，如使用ko.mapping.fromJSON等無濟於事。我相信這是基本/小我缺少的東西...任何幫助將不勝感激！

Answer 1

UI未更新，因爲您的視圖模型永遠不會使用抓取的JSON填充。在調用服務器的$.getJSON中，傳入視圖模型（self）而不是函數（請參閱jQuery docs）以填充視圖模型。試試這個（使用映射插件）：

function companyViewModel() { 
     var self = this; 
     self.CompanyName = ko.observable(); 
     ... the rest of your observables 
    } 

    var vm = new companyViewModel(); 
    $.getJSON('http://localhost:8644/api/TenantAPI/5', function (data) { 
     ko.mapping.fromJS(data, {}, vm); 
    }); 

    ko.applyBindings(vm);