Nativescript 传数据查看

Question

我在开发 nativescript android 应用程序时遇到问题。我正在尝试发送一个 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>

Answer 1

让您的register() 函数返回一个承诺，该承诺会解决来自请求的响应。之后，NavigationEntry 可以在使用 topmost().navigate 时将上下文对象（在本例中为响应）传递给新页面

在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;
}