使用Knockout.js从数据库绑定

Question

我正在尝试学习knockout.js并在页面加载时从数据库中查找数据。我有一切工作，除了成功的数据库检索后，textarea不会更新数据库中的数据。有人告诉我我在做什么错误的绑定？

<textarea id="taProgramOutcome" data-bind="value: programOutcomeText" rows="12" cols="20"></textarea> 


$(function() { 
function AppViewModel() { 
    this.programOutcomeText = "This is a review"; //initial binding works 

    var pageUrl = "/testapp/Service1.asmx"; 

    $.ajax({ 
     type: "POST", 
     url: pageUrl + "/GetReviews", 
     data: "{'disciplineRecordId': '" + 38 + "'}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (result) {   //Database returns records, but the binding does not work. 
      this.programOutcomeText = 
ko.observable(result.d[0].disciplineOutcome); 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert(textStatus); 
     } 
    }); 
} 

ko.applyBindings(new AppViewModel()); 
}); 

Answer 1

2潜在的问题在这里。 this中的success回调不是视图模型。从一开始就应该是可观察的。试试这个...

function AppViewModel() { 
    var self = this; 

    this.programOutcomeText = ko.observable("This is a review"); //initial binding works 

    var pageUrl = "/testapp/Service1.asmx"; 

    $.ajax({ 
     type: "POST", 
     url: pageUrl + "/GetReviews", 
     data: "{'disciplineRecordId': '" + 38 + "'}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (result) {   //Database returns records, but the binding does not work. 
      self.programOutcomeText(result.d[0].disciplineOutcome); 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert(textStatus); 
     } 
    }); 
} 

Answer 2

使用var self = this;在视图模型和AJAX回调参照视图模型领域的self。此外，请写self.programOutcomeText = ko.observable("This is a review");而不是this.programOutcomeText = "This is a review";，然后写self.programOutcomeText(result.d[0].disciplineOutcome);。

$(function() { 
function AppViewModel() { 
    var self = this; 
    self.programOutcomeText = ko.observable("This is a review"); 
    var pageUrl = "/testapp/Service1.asmx"; 
    $.ajax({ 
     type: "POST", 
     url: pageUrl + "/GetReviews", 
     data: "{'disciplineRecordId': '" + 38 + "'}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (result) {   
      self.programOutcomeText(result.d[0].disciplineOutcome); 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert(textStatus); 
     } 
    }); 
} 

ko.applyBindings(new AppViewModel()); 
});