Typescript无法推送到knockoutObservableArray，因为即使在初始化后仍未定义

Question

我正在使用带有打印机的asp.net MVC 5。在我的viewmodel im试图推动我的数据接收从api调用ajax到我的knockoutObservable数组。即使我的数组是initilize（或者至少我认为它应该是）。

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'); 
      } 
     }); 
    } 

，这里是我的观点：

@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> 

} 

而且也是另外一个问题，任何人都可以解释我如何使用位于ReservationDay.ts类在其他文件夹中不在具有如上所述的视图模型的文件中。 My folders img

预先感谢您！

Answer 1

因为this里面的ajax成功并不是指Calendar的实例，而是ajax设置对象。

您可以通过外部的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)); 
      } 
     } 
     } 
    }) 
} 

或者

您可以使用AJAX 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"