Typescript initilize 후에도 undefined이기 때문에 knockoutObservableArray를 푸시 할 수 없습니다.

Question

typescript와 함께 asp.net MVC 5를 사용하고 있습니다. 내 viewmodel 메신저 내 데이터를 내 API에서 내 knockoutObservable 배열 아약스 전화를받을려고. 내 배열 initilize 경우에도 (또는 적어도 내가 있어야한다고 생각). 사람이 얼마나있는 ReservationDay.ts 클래스를 사용하는 나를 설명 할 수

@section Scripts{ 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/knockout") 
@Scripts.Render("~/bundles/bootstrap") 
@Scripts.Render("~/bundles/calendar") 




<script type="text/javascript"> 
    $(function() { 
     var vm = new ViewModel.Calendar(@Model); 
     ko.applyBindings(vm); 
    }); 
</script> 

} 

또한 또 다른 질문 : 여기

Errr : TypeError: Cannot read property 'push' of undefined

내 코드입니다 :

module Models { 

export class ReservationDay { 

    date: KnockoutObservable<Date>; 
    place: KnockoutObservable<string>; 
    avaibleSlots: KnockoutObservable<number>; 
    instructorId: KnockoutObservable<string>; 

    constructor(date: Date, place: string, avaibleSlots: number, instructorId: string) { 
     this.date = ko.observable(date); 
     this.place = ko.observable(place); 
     this.avaibleSlots = ko.observable(avaibleSlots); 
     this.instructorId = ko.observable(instructorId); 
    } 

    } 
} 


module ViewModel { 
    import ReservationDay = Models.ReservationDay; 

export class Calendar { 


    public days: KnockoutObservableArray<ReservationDay> = ko.observableArray<ReservationDay>(); 

    constructor() { 
     this.getMonthCalendar(new Date()); 
    } 


getMonthCalendar(date: Date) { 
     var month = date.getMonth() + 1; 
     $.ajax({ 
      url: 'myApiUrl' + month, 
      type: 'GET', 
      dataType: 'json', 
      async: false, 
      success(data, textStatus, xhr) { 
       if (data.length > 0) { 
        for (var i = 0; i < data.length; i++) { 
         console.log(this.days); // here is undefined 
         this.days.push(new ReservationDay(data[i].date,data[i].place,data[i].avaibleSlots, data[i].instructorId)); // in this line : error : TypeError: Cannot read property 'push' of undefined 
        } 
        console.log("ajax done."); 

       } 
      }, 
      error(xhr, textStatus, errorThrown) { 
       console.log('Error in Operation'); 
      } 
     }); 
    } 

여기 내이다 위와 같이 viewmodel이있는 파일에없는 다른 폴더에 있습니다. My folders img

미리 감사드립니다.

Answer 1

내부의 this 성공은 Calendar이지만 ajax 설정 개체의 인스턴스를 참조하지 않습니다.

당신은 아약스 외부 Calendar 인스턴스에 대한 참조를 추가하여이 문제를 해결할 수 있습니다

getMonthCalendar(date: Date) { 
    var self = this; 

    $.ajax({ 
     ........ 
     ........ 
     success: (data, textStatus, xhr) => { 
     if (data.length > 0) { 
     for (var i = 0; i < data.length; i++) { 
      self.days.push((new ReservationDay(data[i].date,data[i].place,data[i].avaibleSlots, data[i].instructorId)); 
      } 
     } 
     } 
    }) 
} 

또는

당신이 아약스 settings에서 context 키를 사용할 수 있습니다. 모든 ajax 콜백의 사용자 지정 컨텍스트가 설정됩니다.

$.ajax({ 
     url: 'myApiUrl' + month, 
     type: 'GET', 
     context: this, 
     success: (data, textStatus, xhr) => { 
     console.log(this.days); // refers to the "Calendar" instance 
     } 
     .... 
    }); 

Here's a fiddle for testing

---

그리고 당신이 할 수있는 구조로 ReservationDay 클래스를 가져옵니다 :

import {ReservationDay} from "../viewmodel/calendar"