ko.observableArray不接受TypeScript中的数组类型

Question

通过TypeScript运行Knockout教程以更好地理解它，我收到一个错误：“JavaScript运行时错误：初始化时通过的参数observable数组必须是一个数组，或者是null，或者是undefined。“ 尝试了几件事，这是我目前的位置，当然我错过了一些东西。我的主要目的是更好地理解TypeScript中的ObservableArrays。 TS代码的第25行出现故障。 'initialMeal'参数包含数组对象，但'膳食'属性拒绝它。

/// <reference path="typings/jquery/jquery.d.ts" /> 
 
/// <reference path="typings/knockout/knockout.d.ts" /> 
 

 
module Home { 
 
    export class Index { 
 
     name: KnockoutObservable<string>; 
 
     availableMeals: any[]; 
 
     meal: KnockoutObservableArray<InitialMeal>; 
 
     seats: KnockoutObservableArray<any>; 
 

 
     constructor() { 
 
      let self = this; 
 

 
      // Non-editable catalog data - would come from the server 
 
      self.availableMeals = [ 
 
       { mealName: "Standard (sandwich)", price: 0 }, 
 
       { mealName: "Premium (lobster)", price: 34.95 }, 
 
       { mealName: "Ultimate (whole zebra)", price: 290 } 
 
      ]; 
 
     } 
 

 
     seatReservation(name: string, initialMeal: InitialMeal): void { 
 
      let self = this; 
 
      self.name = ko.observable(name); 
 
      self.meal = ko.observableArray(initialMeal); 
 
     } 
 

 
     reservationsViewModel() { 
 
      let self = this; 
 

 
      // Editable data 
 
      self.seats = ko.observableArray([ 
 
       self.seatReservation("Bob", self.availableMeals[1]), 
 
       self.seatReservation("Stan", self.availableMeals[0]) 
 
      ]); 
 
     } 
 
    } 
 

 
    interface InitialMeal extends Array<any> { 
 
     mealName: string; 
 
     price: number; 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    let vm = new Home.Index(); 
 
    ko.applyBindings(vm.reservationsViewModel()); 
 
});

<div class="row"> 
 
    <div class="col-md-12"> 
 
     <table> 
 
      <thead> 
 
       <tr> 
 
        <th>Passenger name</th> 
 
        <th>Meal</th> 
 
        <th>Surcharge</th> 
 
        <th></th> 
 
       </tr> 
 
      </thead> 
 
      <!-- Todo: Generate table body --> 
 
      <tbody data-bind="foreach: seats"> 
 
       <tr> 
 
        <td data-bind="text: name"></td> 
 
        <td data-bind="text: meal().mealName"></td> 
 
        <td data-bind="text: meal().price"></td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div>

Answer 1

这里没有很多的打字稿2 /淘汰赛的东西在那里过去的2013，似乎，但我还是设法得到这个工作。我重写了我的TS文件以获得更好的命名空间（对待它就像一个MVC控制器），一旦我这样做，真正的罪魁祸首似乎是我调用数组元素的方式，因为TypeScript改变了Knockout期望你做到的方式，显然。在Knockout教程here中工作，它会让您将膳食名称和价格传递给data-bind：meal（）。mealName & meal（）。price。然而，从TS开始工作时，我需要将膳食作为命名空间的一部分传递，而不是函数（用餐（），膳食名称至meal.mealName），这是我的主要问题。我也将ko.applyBindings移到了视图中。希望这可以帮助像我一样陷入困境的其他人。 调整后的代码是：

/// <reference path="typings/jquery/jquery.d.ts" /> 
 
/// <reference path="typings/knockout/knockout.d.ts" /> 
 
/// <reference path="typings/knockout.mapping/knockout.mapping.d.ts" /> 
 

 
module Index { 
 

 
\t // Class to represent a row in the seat reservations grid 
 
\t class SeatReservation { 
 
\t \t name: string; 
 
\t \t meal: KnockoutObservable<any>; 
 

 
\t \t constructor(name: string, initialMeal: any) { 
 
\t \t \t this.name = name; 
 
\t \t \t this.meal = initialMeal; 
 
\t \t }; 
 
\t } 
 

 
\t export class ReservationsViewModel { 
 

 
\t \t seats: KnockoutObservableArray<any>; 
 

 
\t \t // Non-editable catalog data - would come from the server 
 
\t \t availableMeals = [ 
 
\t \t \t { mealName: "Standard (sandwich)", price: 0 }, 
 
\t \t \t { mealName: "Premium (lobster)", price: 34.95 }, 
 
\t \t \t { mealName: "Ultimate (whole zebra)", price: 290 } 
 
\t \t ]; 
 

 
\t \t constructor() { 
 
\t \t \t //Editable data 
 
\t \t \t this.seats = ko.observableArray([ 
 
\t \t \t \t new SeatReservation("Steve", this.availableMeals[1]), 
 
\t \t \t \t new SeatReservation("Bert", this.availableMeals[2]) 
 
\t \t \t ]); 
 
\t \t } 
 
\t } 
 
}

<div class="row"> 
 
\t <div class="col-md-12"> 
 
\t \t <table> 
 
\t \t \t <thead> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <th>Passenger name</th> 
 
\t \t \t \t \t <th>Meal</th> 
 
\t \t \t \t \t <th>Surcharge</th> 
 
\t \t \t \t \t <th></th> 
 
\t \t \t \t </tr> 
 
\t \t \t </thead> 
 
\t \t \t <!-- Todo: Generate table body --> 
 
\t \t \t <tbody data-bind="foreach: seats"> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td data-bind="text: name"></td> 
 
\t \t \t \t \t <td data-bind="text: meal.mealName"></td> 
 
\t \t \t \t \t <td data-bind="text: meal.price"></td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t </div> 
 
</div> 
 

 
@section scripts{ 
 
\t <script> 
 
\t \t $(document).ready(function() { 
 
\t \t \t var viewModel = new Index.ReservationsViewModel(); 
 
\t \t \t ko.applyBindings(viewModel); 
 
\t \t }); 
 
\t </script> 
 
}