訪問屬性

Question

下面是這種情況：

我現在有一個對象，如下所示：

運行modal.PersonInfo後，我得到返回的對象開始第3行。見上圖。

問題：在我的HTML，我怎麼能叫FirstName和LastName

錯誤狀態：

Uncaught ReferenceError: Unable to process binding "text: function(){return PersonInfo().FirstName}" Message PersonInfo is not defined

的JavaScript：

function Person() { 
    var modal = this; 
    modal.PersonInfo = ko.observable(''); 

    modal.setData = function (id) { 
     $.ajax({ 
      type: "GET", 
      url: '/Person/UserInformation?id=' + id, 
      contentType: "application/json; charset=utf-8", 
      success: function (data) { 
       modal.setPersonInfo(data); 

       $('#person-modal').modal('show'); 
      } 
     }); 

     modal.setPersonInfo = function (data) { 
      modal.PersonInfo = data; 
     } 
    } 
}; 

HTML 我的想法是，我可以做到以下幾點：

<p data-bind="text: PersonInfo().FirstName"></p> 
<p data-bind="text: PersonInfo().LastName"></p> 

Answer 1

此行取代可觀察到的，而不是分配值：

modal.PersonInfo = data; 

試試這個：

modal.PersonInfo(data) 

還有就是放錯地方的閉幕BR ace：model.setPersonInfo was insidemodel.setData

請參閱working demo。

Answer 2

你會需要直接使用某種映射，比如ko.mapping。確保你綁定你的視圖模型，以某種方式啓動你的功能，你應該沒問題。

var DemoPage = (function() { 
 
    function DemoPage() { 
 
    \t var _this = this; 
 
     _this.PersonInfo = ko.observable({}); 
 
     _this.setData = function (id) { 
 
      // some ajax that returns data 
 
      var _data = { 
 
      \t FirstName: 'Frankie', 
 
       LastName: 'Jones' 
 
      }; 
 
      _this.setPersonInfo(_data); 
 
      //$('#person-modal').modal('show'); 
 
    \t }; 
 
     \t _this.setPersonInfo = function (data) { 
 
      ko.mapping.fromJS(data, {}, _this.PersonInfo()); 
 
     \t }; 
 
     
 
    \t this.setData(); 
 
    } 
 
    return DemoPage; 
 
})(); 
 

 
var demoApp = new DemoPage(); 
 

 
ko.applyBindings(demoApp);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script> 
 

 
<p data-bind="text: PersonInfo().FirstName"></p> 
 
<p data-bind="text: PersonInfo().LastName"></p>