我在开发 nativescript android 应用程序时遇到问题。我正在尝试发送 POST 请求,然后我试图从该请求获得响应。我正在尝试使用此响应来填充 ListView。我已成功发送发布请求并从服务器获得响应。但问题是我无法填充 ListView 。这是我的代码-
注册.xml
<Page loaded="loaded">
<StackLayout>
<Image src="res://logo" stretch="none" horizontalAlignment="center"/>
<TextField text="{{ name }}" id="name" hint="Name" />
<TextField text="{{ email }}" id="email" hint="E-mail" />
<TextField text="{{ password }}" secure="true" hint="Password" />
<Button text="Sign Up" tap="register" />
</StackLayout>
</Page>
Register.js
var dialogsModule = require("ui/dialogs");
var frameModule = require("ui/frame");
var UserViewModel = require("../../shared/view-models/user-view-model");
var user = new UserViewModel();
exports.loaded = function(args) {
var page = args.object;
page.bindingContext = user;
};
function completeRegistration() {
user.register()
.then(function() {
dialogsModule
.alert("Your account was successfully created.")
.then(function() {
frameModule.topmost().navigate("views/list/list");
});
}).catch(function(error) {
console.log(error);
dialogsModule
.alert({
message: "Unfortunately we were unable to create your account.",
okButtonText: "OK"
});
});
}
exports.register = function() {
completeRegistration();
};
用户 View model.js
function User(info) {
info = info || {};
var viewModel = new Observable({
name: info.name || "",
email:info.email || "",
password: info.password || "",
});
viewModel.register = function() {
return fetchModule.fetch("http://10.0.2.2:8000/user_signup", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
name: viewModel.get("name"),
email:viewModel.get("email"),
password:viewModel.get("password"),
}).then(r => { return r.json(); }).then(function (r) {
for(var i=0;i<r.length;i++){
var goods={name:r[i].name}
goodsList.push(goods);
};
console.log(goodsList);
}, function (e) {
console.log("Error occurred " + e);
});
};
return viewModel;
}
function handleErrors(response) {
if (!response.ok) {
console.log(JSON.stringify(response));
throw Error(response.statusText);
}
return response;
}
function pageLoaded(args) {
var page = args.object;
pageData.set("goodsList", goodsList);
page.bindingContext = pageData;
}
module.exports = User;
ListView
<Page loaded="pageLoaded">
<GridLayout>
<ListView items="{{ goodsList }}">
<ListView.itemTemplate>
<Label text="{{ name }}" horizontalAlignment="left" verticalAlignment="center"/>
</ListView.itemTemplate>
</ListView>
</GridLayout>
</Page>
最佳答案
让您的 register()
函数返回一个 promise,它解析来自请求的响应。在那之后,有 NavigationEntry
,当使用 topmost().navigate 时,您可以在其中将上下文对象(在本例中为响应)传递给新页面
在用户 View model.js
中:
viewModel.register = function() {
return new Promise<any>((resolve, reject) => {
fetchModule.fetch("http://10.0.2.2:8000/user_signup", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
name: viewModel.get("name"),
email:viewModel.get("email"),
password:viewModel.get("password"),
}).then(r => { return r.json(); }).then(function (r) {
for(var i=0;i<r.length;i++){
var goods={name:r[i].name}
goodsList.push(goods);
};
resolve(goodsList);
}, function (e) {
reject(e);
});
然后在 register.js
中:
function completeRegistration() {
user.register()
.then(function(result) {
dialogsModule
.alert("Your account was successfully created.")
.then(function() {
frameModule.topmost().navigate({
moduleName: "view/list/list",
context: {goodsList: result}
});
});
}).catch(function(error) {
console.log(error);
dialogsModule
.alert({
message: "Unfortunately we were unable to create your account.",
okButtonText: "OK"
});
});
}
然后在列表页的controller中:
function pageLoaded(args) {
var page = args.object;
var context = page.navigationContext;
page.bindingContext = context;
}
关于javascript - Nativescript 传数据查看,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40030765/