javascript - knockout 帮助获取外部数据

Question

我刚刚完成 knockout 教程，现在我正在尝试从外部页面获取数据。

在教程中他们使用以下代码:

self.seats = ko.observableArray([
        new SeatReservation("Steve", "Standard (sandwich)", "34.95" ),
        new SeatReservation("Paul", "Standard (sandwich)", "14.95" )

       ])

我想更新它以从循环选项的外部文件中提取:

self.seats = ko.observableArray([
  
  $.get( "scripts/test.js", function( data ) {
  			
    
    
     $(data.data).each(function(index, result) { 
  
         new SeatReservation(result.name, result.mealName, result.price )
     })  
     
   })
     
     
  

  )]

测试的结构是:

var data = [
  {
    'mealName': 'Standard (sandwich)',
    'price': '0',
  },
  {
    'mealName': 'Main (sandwich)',
    'price': '34.95',
  }
];

我还需要做什么？

我在页面上包含了 jQuery 和 Knockout。

我还必须从 file://运行它，因为它需要发送到某个地方

<小时/>

所以我已经更新了我的代码来执行此操作

var newData = ko.utils.arrayForEach(data, function(item){
		console.log(item)
		console.log(item.firstName + " " + item.lastName + " " + item.price);
		
		return new SeatReservation(item.firstName, item.lastName, item.price);
        
		
	});
        console.log("here");    		
        console.log(newData);
	  	self.seats(newData);

控制台正在按照项目的预期记录数据，但返回没有执行任何操作，并且 console.log(newData) 返回未定义

为什么会这样？

Answer 1

根据目前的情况，您将丢弃 ajax 调用的结果。你需要做类似的事情

$.get( "scripts/test.js", function( data ) {
  self.availableMeals = data;
});

但是，由于 self.availableResults 不是 knockoutjs ObservableArray，因此页面不会响应通过 ajax 调用来自服务器的更改。

你会想做这样的事情。

self.seats= ko.observableArray();

$.get( "scripts/test.js", function( data ) {
  var newData = ko.utils.arrayForEach(data, function(item){
    return new SeatReservation("", item.mealName, item.price);
  });
  self.seats(newData);
});