将数据传递给视图

Nativescript Pass data to view

本文关键字：视图数据更新时间：2023-09-26

我正面临一个问题，而开发一个原生脚本android应用程序。我试图发送一个POST请求，并从该请求我试图得到一个响应。使用这个响应，我试图填充一个ListView。我已经成功发送了post请求，并得到了服务器的响应。但问题是我无法填充listview。这是我的代码-

Register.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();
};

用户视图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;

列表视图

    <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

时将上下文对象(在本例中是响应)传递给新页面

In User-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"
                });
        });
}

然后在列表页的控制器中:

function pageLoaded(args) {
    var page = args.object;
    var context = page.navigationContext;
    page.bindingContext = context;
}