Nativescript :bindingContext to ListView

Question

I am new to Nativescript and trying to develop an android app.I am sending a GET request and from the response I have built a Listview.Now,I am trying to send a POST request when a item of Listview is selected.But I can not bind the context.So,my POST request is not properly working.My question is how can I bind the context of listview.

Js Controller:

var CategoryViewModel = require("../../shared/category_view_model");

var fetchModule = require("fetch");

var dialogsModule = require("ui/dialogs");

var observableModule = require("data/observable")

var page;

var data;

var categoryList = new CategoryViewModel([]);  
var pageData = new observableModule.fromObject({
    categoryList: categoryList
});



var UserViewModel = require("../../shared/brand_view_model");
var user = new UserViewModel();



exports.loaded = function(args) {
    page = args.object;

    page.bindingContext = pageData;

    categoryList.empty();
    categoryList.load();


};

function getBrand() {

 user.register();

}
exports.brand=function (args) {


    getBrand();
}

View:

<Page loaded="loaded">
    <GridLayout>
        <ListView items="{{ categoryList }}" itemTap="brand">
            <ListView.itemTemplate>
                <Label text="{{ category }}" horizontalAlignment="left" verticalAlignment="center"  />
            </ListView.itemTemplate>
        </ListView>

    </GridLayout>
</Page>

View-model for POST request:

var fetchModule = require("fetch");
var Observable = require("data/observable").Observable;

 var observableArray = require("data/observable-array");
 var goodsList = new observableArray.ObservableArray([]);
 var pageData = require("data/observable").Observable;




function user(info) {
    info = info || {};

    // You can add properties to observables on creation
    var viewModel = new Observable({
        category: info.category || "",

    });

    viewModel.register = function() {



    fetch("http://10.0.2.2:8000/user_signup", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ 


    category:  viewModel.get("category"), 


    })
}).then(r => { return r.json(); }).then(function (r) {
     console.log("Success");
}, 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;
}

module.exports = user;

Can you write what what context you got from function ? or what error if there is something ? — Marek Maszay
As you see,I don't bind the context for selecting the listview item.I don't know how.I already bind the context for creating listview in the exports.loaded function.But how to bind the context when a item is selected?And the error is,my data is saved in my server but it is blank. — Asm Arman
quite possible as this line ;category: viewModel.get("category") from View-model is equal to category:"", best would be pass item bindindContext to register function from tap event — Marek Maszay

Marek Maszay Marek Maszay · Accepted Answer · 2016-10-16T21:51:26

You can try it in this way

JS controller

exports.brand=function (args) {
    var list = args.object;
    var item = list.bindingContext; 
    user.register(item);
}

View model

viewModel.register = function(item) {
    //item points from user.register(item);
    fetch("http://10.0.2.2:8000/user_signup", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ 
          category:  item, 
       })
       }).then(r => { return r.json(); }).then(function (r) {
              console.log("Success");
       }, function (e) {
            console.log("Error occurred " + e);
       });
};

Nativescript :bindingContext to ListView

1 Answers