Typescript를 사용하여 녹아웃을위한 웹 메일 데모

Question

녹아웃에 대한 마지막 튜토리얼을 Typescript와 함께 사용하려고하지만 이메일 격자를 채울 수 없습니다.

class WebmailViewModel { 

    folders: any; 
    chosenFolderId: any; 
    chosenFolderData: any; 
    public event_goToFolder: (folder) => void; 

    constructor() { 

     this.folders = ['Inbox', 'Archive', 'Sent']; 

     this.chosenFolderId = ko.observable(); 
     this.chosenFolderData = ko.observable(); 

     this.event_goToFolder = ((folder) => { 
      this.chosenFolderId(folder); 
      $.get('/mail/' + folder + ".txt", { folder: folder }, this.chosenFolderData); 
      // send JSON result to DIV 
      $("div#jsond").text(JSON.stringify(this.chosenFolderData())); 
     }); 

     // set default folder 
     this.event_goToFolder("Inbox"); 
    } 
}; 

ko.applyBindings(new WebmailViewModel()); 

그리고 내보기 : 데모에서, 내가 응용 프로그램을 실행하면

<ul class="folders" data-bind="foreach: folders"> 
     <li data-bind="text: $data, css: { selected: $data == $root.chosenFolderId() }, click: $root.event_goToFolder"></li> 
    </ul> 

    <table class="mails" data-bind="with: chosenFolderData"> 
     <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead> 
     <tbody data-bind="foreach: mails"> 
      <tr> 
       <td data-bind="text: from"></td>(
       <td data-bind="text: to"></td> 
       <td data-bind="text: subject"></td> 
       <td data-bind="text: date"></td> 
      </tr>  
     </tbody> 
    </table> 
    <div style="border:4px solid blue" data-bind="text: chosenFolderData"></div> 
    <div id="jsond" style="border:4px solid black"></div> 

, 내가 DIV의 #jsond에서 JSON 데이터를 볼 수 있지만 예상대로 이메일 그리드가 표시되지 않습니다 .

언급 할 가치가있는 점은 JSON 데이터를 로컬에 저장 한 TXT 파일을 사용하고 있습니다. 실제 웹 API를 사용하는 대신 그러나 JSON 데이터는 DIV에서 정상적으로 표시되므로 문제가 아닌 것으로 보입니다. 여기

내 JSON 데이터입니다 :

"{\"id\":\"Inbox\",\"mails\":[{\"id\":1,\"from\":\"Abbot <oliver@smoke-stage.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 25, 2011\",\"subject\":\"Booking confirmation #389629244\",\"folder\":\"Inbox\"},{\"id\":2,\"from\":\"Addison Begoat <upton.oprdrusson@pear-income.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 7, 2011\",\"subject\":\"FW: Associate advice\",\"folder\":\"Inbox\"},{\"id\":3,\"from\":\"Allistair <leroy72@plane-railway.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 19, 2011\",\"subject\":\"RE: Phone call tomorrow 5 o'clock\",\"folder\":\"Inbox\"},{\"id\":4,\"from\":\"emmanuel26@ghost.xyz\",\"to\":\"steve@example.com\",\"date\":\"May 22, 2011\",\"subject\":\"Completing basketball project\",\"folder\":\"Inbox\"},{\"id\":5,\"from\":\"jamalia.alnismith1@twigdad.xyz\",\"to\":\"steve@example.com\",\"date\":\"Apr 26, 2011\",\"subject\":\"FW: Can you get DE to resubmit accounts?\",\"folder\":\"Inbox\"},{\"id\":6,\"from\":\"lionel.qugy@cribsmoke.xyz\",\"to\":\"steve@example.com\",\"date\":\"May 22, 2011\",\"subject\":\"RE: Catch up at 9:00 to finalise rain spec\",\"folder\":\"Inbox\"},{\"id\":7,\"from\":\"Madison Lalinesson <melinda.gofagy@wing-language2.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 19, 2011\",\"subject\":\"RE: Pencil scenarios\",\"folder\":\"Inbox\"},{\"id\":8,\"from\":\"rajah.nukripyford@cast92.xyz\",\"to\":\"steve@example.com\",\"date\":\"Apr 28, 2011\",\"subject\":\"Flavor benefit gig\",\"folder\":\"Inbox\"},{\"id\":9,\"from\":\"Sandra Juanhison <yoshi.mostaline72@facefruit.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 8, 2011\",\"subject\":\"RE: Apparel5 network is back up\",\"folder\":\"Inbox\"},{\"id\":10,\"from\":\"Sylvester <rose.va@bunpig98.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 1, 2011\",\"subject\":\"Feedback requested by Ayanna Nuyo\",\"folder\":\"Inbox\"},{\"id\":11,\"from\":\"veronica@heart.xyz\",\"to\":\"steve@example.com\",\"date\":\"May 4, 2011\",\"subject\":\"Project Book starting 6pm\",\"folder\":\"Inbox\"},{\"id\":12,\"from\":\"XLN <basia@framehome.xyz>\",\"to\":\"steve@example.com\",\"date\":\"May 8, 2011\",\"subject\":\"RE: Remember Whoopi's joke\",\"folder\":\"Inbox\"}]}" 

내가받은 실제 오류 :

Uncaught Error: Unable to parse bindings. 
Message: ReferenceError: mails is not defined; 
Bindings value: foreach: mails 

UPDATE :

난에서 편지에 거의 코드를 다음과 같은거야 녹아웃 사이트.

var WebmailViewModel = (function() { 
    function WebmailViewModel() { 
     var _this = this; 
     this.folders = [ 
      'Inbox', 
      'Archive', 
      'Sent' 
     ]; 
     this.chosenFolderId = ko.observable(); 
     this.chosenFolderData = ko.observable(); 
     this.event_goToFolder = (function (folder) { 
      _this.chosenFolderId(folder); 
      $.get('/mail/' + folder + ".txt", { folder: folder }, this.chosenFolderData); 
     }); 
     this.event_goToFolder("Inbox"); 
    } 
    return WebmailViewModel; 
})();  
; ; 
ko.applyBindings(new WebmailViewModel()); 

Answer 1

당신은 관찰로 this.chosenFolderData을 치료하는 표시되지 않습니다 - 다른 모든 날 타이프 스크립트 변환의 ​​실제 JS 코드를 게시하는 어쩌면 도움이 될 ... 물론이 시점까지 일했다 , get 쿼리에서 반환하는 JSON으로 그냥 덮어 쓰지 않으십니까? 어떻게 당신이 그것을 변경하는 경우 발생합니다 `catch되지 않은 형식 오류 :의 방법 'fromJS'을 호출 할 수 없습니다

이

$.get('/mail/' + folder + ".txt", { folder: folder }, function(data) 
{ 
    this.chosenFolderData = ko.mapping.fromJS(data); 
}); 

이 사용하는 난 그냥이 갈 ...하지만 이제 다음을 얻을했다 Knockout mapping plugin