Typescript Impossible d'appuyer sur knockoutObservableArray car non défini même après l'initialisation

Question

J'utilise asp.net MVC 5 avec tapuscrit. Dans mon viewmodel im essayant de pousser mes données reçoivent dans l'appel d'ajax de mon api à mon tableau de knockoutObservable. Même lorsque mon tableau est initilize (ou du moins je pense que ça devrait l'être).

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

Voici mon code:

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

et voici mon avis:

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

} 

Et aussi une autre question, quelqu'un peut me expliquer comment utiliser la classe ReservationDay.ts situé dans un autre dossier pas dans le fichier qui a un viewmodel comme ci-dessus. My folders img

Merci d'avance!

Answer 1

Parce que this à l'intérieur du succès ajax ne fait pas référence à une instance de Calendar mais l'objet de paramètres ajax.

Vous pouvez résoudre ce problème en ajoutant une référence à l'instance Calendar extérieur ajax:

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

Ou

vous pouvez utiliser la context clé ajax settings. Cela définira le contexte personnalisé de tous les rappels 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

---

Et pour importer la classe ReservationDay dans votre structure, vous pouvez faire:

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