ListPicker not loading


Here is my xml

<Page class="page" xmlns="" loaded="loaded">
	<ActionBar title="Settings" class="action-bar"></ActionBar>
		<StackLayout class="home-panel" verticalAlignment="top">
			<GridLayout columns="*, 60" rows="80, 40,40,100,40,80" width="100%" borderWidth="0px">
				<Label text="Show future games only" row="0" col="0" colSpan="1" />
				<Switch checked="true" row="0" col="3" />
				<Label text="Choose your Division" row="1" col="0" colSpan="1" />
				<ListPicker id="divPicker" items="{{ divList }}" borderWidth="0px" row="2" col="0" colSpan="2" />
				<Label text="Choose your Team" row="3" col="0" colSpan="1" />
				<ListPicker id="teamPicker" items="{{ teamList }}" width="80%" row="4" col="0" colSpan="2" />
				<Button text="Continue" tap="{{ onButtonTap }}" row="5" col="0" colSpan="2" width="80%" borderWidth="1px" marginTop="100px" /> 


And here is my JS

var frameModule = require("ui/frame");
var dialogsModule = require("ui/dialogs");
var observableModule = require("data/observable")

var pageData = new observableModule.Observable({
  divList: ["Monday Div 1", "Monday Div 2", "Wednesday Div 1", "Wednesday Div 2"]
function loaded(args) {
  page = args.object;
  page.bindingContext = pageData;
  var divPicker = page.getViewById("divPicker");
  divPicker.addEventListener(observableModule.Observable.propertyChangeEvent, function (e) {
    var div;
    switch (e.value) {
      case 0:
        div = "mon_1";
      case 1:
        div = "mon_2";
      case 2:
        div = "wed_1";
      case 3:
        div = "wed_2";
    alert("My Div is " + div);
exports.loaded = loaded;

I cannot get divList to bind to the ListPicker, tried various options.

Thanks in advance.


fromObject is the valid syntax for initiating an Observable from object source.


Sorry could you expand on this, very new to NativeScript. Could I in fact simplify what I need rather than use Observable.


Did you go through the link?

If you want to understand how Observable helps, checkout the data binding documentation -


OK fixed the issue this way:-

const fromObject = require("data/observable").fromObject;

function onNavigatingTo(args) {
  const divList = ["[Select]","Monday Div 1", "Monday Div 2", "Wednesday Div 1", "Wednesday Div 2"];
  const source = fromObject({
    items: divList
  source.set("divList", divList);
  const page = args.object;
  page.bindingContext = source;

However, I only see one option at a time whereas on iOS and Android your normally see a faded list of options to scroll to. Also there is no Done option that a picker has on either iOS or Android. Am I using the wrong control.


You might need dropdown plugin

Still how it looks or operates depends on platform, Android by default has a Dropdown widget but iOS has nothing equivalent so we end up using a Picker, show when required.


Thank you, ideal. I have an issue with multiple drop-downs on the same page but will open a new question.