如何在 nativescript javascript 中从远程 php 检索多个数据?

Question

我正在尝试从远程php文件中检索多个数据并动态显示它们，当我编码Cordova时，我通常使用jquery执行此操作。 我现在正在使用NativeScript。 这是我之前使用的jquery代码

$.getJSON(serviceURL + 'getroutes.php?station='+station, function(data) {
employees = data.items;
$.each(employees, function(index, employee) {
$('#employeeList').append('<li>'+
'<img src="js/citybus.png" class="list-icon"/>' +
'<p class="line1">' + employee.firstName + '</p>' +
'<p class="line2">' + difference + ' Out' + '</p>' +
'<p class="line3" style="color:'+ color +';margin-left:60px">' + SeatsLeft + ' seats left </p>' +
'<button style="display:'+ display +'" class="bubble" data-difference="' + hoursMin + '" data-route="' + employee.firstName + '" data-busnum="' + employee.lastName + '" onclick="bookSeat(this);">' + '<center><img src="js/seat.jpg" style="height:15px;width:15px;"/></center>' + '</button>'
+ '<button data-id="' + employee.id + '" data-diff="' + hoursMin + '" data-name="' + employee.firstName + '" class="bubble" style="margin-right:30px" onclick="setReminder(this);">' + '<center><img src="js/bell.png" style="height:15px;width:15px;"/></center>' + '</button></li>');
if(index && index % 4 === 0) {
$('#employeeList').append('<center><div class="adSpace2" style="margin-top:2.5px;margin-bottom:2.5px;">'+'</div></center>');
}
});
setTimeout(function(){
scroll.refresh();
});
});

请问我如何使用本机脚本执行此操作？

Answer 1

您需要使用 Fetch API。

const Observable = require('tns-core-modules/data/observable').Observable
const model = new Observable()
function loaded(args) {
args.object.bindingContext = model
fetch(serviceURL + 'getroutes.php?station='+station).then(res => model.set('employees', res.items))
}
exports.loaded = loaded

然后在您的视图 XML 中：

<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:lv="nativescript-ui-listview" aloaded="loaded">
<StackLayout>
<ListView items="{{employees}}">
<Label class="line1" text="{{firstName}}" />
</ListView>
</StackLayout>
</Page>