Passing data from button in a listview to viewmodel.js


#1

I can’t get the location data.

console :

Error
map-view-model.js:30 Error: Either set ‘address’ or ‘lat’ and ‘lng’.

Minimal code to reproduce:
XML

<lv:RadListView id="maplist">
                <lv:RadListView.listViewLayout>
                    <lv:ListViewGridLayout scrollDirection="Vertical" spanCount="2"/>
                </lv:RadListView.listViewLayout>
                <lv:RadListView.itemTemplate>
                <Card:CardView class="cardstyle" radius="10" margin="10" col="0" elevation="10">
                    <GridLayout rows="120, auto" columns="*, *, *">
                        <image src="{{ image }}" stretch="aspectFill" colSpan="3" row="0" />
                        <Label text="{{ text }}" class="map-text" textWrap="true" colSpan="3" />
                        <button text="&#xE55F;" tap="maplocate" location="{{ location }}" class="Material info clear-btn white" row="1" col="0" />
                        <button text="&#xE559;" class="Material info clear-btn white" row="1" col="1" />
                        <button text="&#xE80D;" class="Material info clear-btn white" row="1" col="2" />
                    </GridLayout>
                </Card:CardView>
                </lv:RadListView.itemTemplate>
            </lv:RadListView>

JS

const frameModule = require("ui/frame");
var view = require("ui/core/view");

const MapViewModel = require("./map-view-model");
function onNavigatingTo(args) {
 const page = args.object;
 page.bindingContext = new MapViewModel();
}

exports.onLoaded = function(args) {
    var items = [];
    items.push(
    {
        image: "~/images/map/gym.jpg",
        text: "Bldg 16 - Gymnasium",
        location: "Gym"
    },
    {
        image: "~/images/map/scicom.jpg",
        text: "Bldg 41 - Science Complex",
        location: "SciCom"
    },
    {
        image: "~/images/map/lrc.jpg",
        text: "Bldg 23 - Learning Resource Center",
        location: "LRC"
    }
    )
    var pages = args.object;
    var listview = view.getViewById(pages, "maplist");
    listview.items = items;
}

function maplocate(args) {
    var view = args.object;
    var model = view.page.bindingContext;

    model.locatemap();
}
exports.maplocate = maplocate

VM.JS

const observableModule = require("data/observable");

var Directions = require("nativescript-directions").Directions;
var directions = new Directions();

function MapViewModel() {
    const viewModel = observableModule.fromObject({

    	locatemap : function() {
    		var location = this.location;
    		if (location == "Gym") {
    			var locatethis = "USTP Gymnasium, Cagayan de Oro, Misamis Oriental";
    		} else if (location == "SciCom") {
    			var locatethis = "MUST Science Center, Cagayan de Oro, Misamis Oriental";
    		} else if (location == "LRC") {
    			var locatethis = "Building 23, Cagayan de Oro, Misamis Oriental";
    		} else {
    			console.log("Error");
    		}
    		directions.navigate({
			  to: { // either pass in a single object or an Array (see the TypeScript example below)
			    address: locatethis
			  }
			  // for iOS-specific options, see the TypeScript example below.
			}).then(
			  function() {
			    console.log("Maps app launched.");
			  },
			  function(error) {
			    console.log(error);
			  }
			);

    	}

    });

    return viewModel;
}

module.exports = MapViewModel;

#2

Can you pass a string to address: manually to make sure that part is working?