I have a Vanilla Nativescript app that I am testing a RadListView on; populating the items from JS.
As soon as I SET the value of the ObservableArray the app just crashes. I have tried to set the value onload as well as on tap. In this example tab on the BOTTOM LABEL; at the moment a label at the top will display the set value so I know that the object does exist; but when trying to bind the data to the list view things go awry.
Below is the base code to replicate this issue; if you uncomment the line:
pageData.set("items", items);
Any direction would be much appreciated.
HOME-PAGE.XML
<Page class="page"
navigatingTo="onNavigatingTo"
loaded="pageLoaded"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:lv="nativescript-ui-listview"
>
<ActionBar class="action-bar">
<Label class="action-bar-title" text="Home"></Label>
</ActionBar>
<StackLayout>
<!-- Add your page content here -->
<Label text="{{ toptext }}" textAlignment="center" color="#88f" fontSize="15" fontWeight="bold"/>
<lv:RadListView height="350" items="{{ items }}" >
<lv:RadListView.itemTemplate>
<StackLayout orientation="vertical">
<Label fontSize="20" text="{{ itemName }}"/>
<Label fontSize="14" text="{{ itemDescription }}"/>
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
<Label text="BOTTOM LABEL" textAlignment="center" color="#f88" fontSize="33" fontWeight="bold" onTap="fillListview"/>
</StackLayout>
</Page>
HOME-PAGE.JS
const HomeViewModel = require("./home-view-model");
var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;
var items = new ObservableArray();
var pageData = new Observable();
function onNavigatingTo(args) {
const page = args.object;
page.bindingContext = new HomeViewModel();
}
exports.onNavigatingTo = onNavigatingTo;
exports.pageLoaded = function(args) {
page = args.object;
page.bindingContext = pageData;
items.push(
{
itemName: "$USD / ZAR",
itemDescription: "13.50",
itemDate: "3 Jul 2019",
itemImage: "~/images/arcade-fire.png"
},
{
itemName: "$USD / ZAR",
itemDescription: "18.00",
itemDate: "17 Aug 2019",
itemImage: "~/images/bon-iver.png"
}
)
};
exports.fillListview = function(args) {
pageData.set("toptext", items);
// pageData.set("items", items);
}
i tried to reproduce your problem in a playground project but all works fine, do you recive some error in console about your problem ??
Here is the project where i was trying your code