CODEWITHSUNDEEP
nativescript
Stiofan O'Connor
Stiofan O'Connor

Reputation: 362

What is NativeScript syntax for list-picker?

I have not been able to find a working example of NS+JS for list-picker, non of the examples in the docs have XML examples. Can anyone help?

Upvotes: 3

Views: 1373

Answers (1)

TJ VanToll
TJ VanToll

Reputation: 12704

What you’ll need to do is bind a <ListPicker>’s items property to an array on your page’s bindingContext. Here’s a basic example:

<!-- main-page.xml -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  <StackLayout>
    <ListPicker
      items="{{ pokemon }}"
      id="pokemonPicker"
    ></ListPicker>
  </StackLayout>
</Page>

// main-page.js
var Observable = require("data/observable").Observable;

var pageData = new Observable({
  pokemon: ["Bulbasaur", "Charmander", "Squirtle"]
});

exports.pageLoaded = function(args) {
  var page = args.object;
  page.bindingContext = pageData;

  page.getViewById("pokemonPicker").addEventListener(
    Observable.propertyChangeEvent, function(e) {
      if (e.propertyName == "selectedIndex") {
        console.log("You selected: " + pageData.pokemon[e.value]);
      }
    }
  );
};

Upvotes: 7

Related Questions