I'm not sure if my code files below are the correct way to show images with creating RadListView via code behind. I'm getting a CONSOLE ERROR file:///app/tns_modules/tns-core-modules/trace/trace.js:165:30: Binding: Property: 'mySubsContentArray' is invalid or does not exist. SourceProperty: 'mySubsContentArray'
Please advise, thank you.
package.json
{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "org.nativescript.RLVcode",
"tns-ios": {
"version": "3.2.0"
},
"tns-android": {
"version": "3.2.0"
}
},
"dependencies": {
"nativescript-telerik-ui": "^3.1.1",
"nativescript-theme-core": "~1.0.2",
"tns-core-modules": "~3.2.0"
},
"devDependencies": {
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"lazy": "1.0.11"
}
}
main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:lv="nativescript-telerik-ui/listview" navigatingTo="onNavigatingTo" class="page">
<Page.actionBar>
<ActionBar title="RLV By code" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout id="container" >
<Label text="Below is RLV By code" class="h1 text-center"/>
</StackLayout>
</Page>
main-page.js
var observable = require("data/observable");
var ObservableArray = require("data/observable-array").ObservableArray;
var listview_1 = require("nativescript-telerik-ui/listview");
var myContent = ["~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png"];
var content = new ObservableArray();
var viewModel = new observable.Observable();
viewModel.set("mySubsContents", content);
function getSubsContents() {
var contentArray = myContent;
contentArray.forEach(function(element) {
content.push({mySubsContentArray: element});
});
}
exports.onNavigatingTo = function(args) {
var page = args.object;
var container = page.getViewById("container");
var radList = new listview_1.RadListView();
radList.height = 2000;
radList.items = "{{ mySubsContents }}";
radList.itemTemplate = "<StackLayout><Image src='{{ mySubsContentArray }}' /></StackLayout>";
var linearLayout = new listview_1.ListViewLinearLayout();
linearLayout.scrollDirection = "Vertical";
linearLayout.itemHeight = 123;
linearLayout.itemWidth = 123;
radList.listViewLayout = linearLayout;
container.addChild(radList);
getSubsContents();
page.bindingContext = viewModel;
}
Thanks so much.