在观看了很多教程并尝试了很多代码片段后,我仍然对何时以及如何使用ObservableArray和绑定感到困惑。试图从我的json数组获取值列表视图 - alert显示它们,控制台显示我认为它会。唯一不起作用的是我的listview。任何人的帮助请!在下面发布了我的javascript和相应的xml。
----更新了我的代码。显示一个包含六个值的数组,每个值都包含在itemTemplates中。如何访问每个实例?和钥匙?需要显示键:值对,看起来数组中缺少键。任何赞赏的东西!
listview.js
testJsonArray = {
"results": [{
"testName": "Multiplizieren",
"testKlasse": 3,
"testFach": "Mathematik"
},
{
"testName": "Addieren",
"testKlasse": 3,
"testFach": "Mathematik"
}]
};
function onPageLoaded(args) {
var page = args.object;
var observableArray = require("data/observable-array");
var i = testJsonArray.results.length;
var tests = new observableArray.ObservableArray([]);
while (i--) {
t = testJsonArray.results[i];
tests.push([t.testName, t.testKlasse, t.testFach]);
};
var c = tests.length;
while (c--) {
console.log(c);
};
alert(tests);
page.bindingContext = {myItems: tests};
}
exports.onPageLoaded = onPageLoaded;
listview.xml
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
<ScrollView>
<ListView id="listview" items="{{ myItems }}">
<ListView.itemTemplate>
<StackLayout orientation="horizontal">
<Label text="{{ $value }}" />
</StackLayout>
</ListView.itemTemplate>
</ListView>
</ScrollView>
</Page>
答案 0 :(得分:0)
尝试将listview.xml更改为:
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
<ListView id="listview" items="{{ tests }}">
<ListView.itemTemplate>
<StackLayout orientation="horizontal">
<Label text="{{ name }}" />
</StackLayout>
</ListView.itemTemplate>
</ListView>
</Page>
答案 1 :(得分:0)
在重新设计完所有内容后,现在可以正常工作了(感谢上帝为github资源!)
listview.js
data = [{
"testName": "Multiplizieren",
"testKlasse": 3,
"testFach": "Mathematik"
},
{
"testName": "Addieren",
"testKlasse": 3,
"testFach": "Mathematik"
}]
var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;
var page;
var items = new ObservableArray([]);
var pageData = new Observable();
exports.pageLoaded = function(args) {
page = args.object;
page.bindingContext = pageData;
items.push(data);
pageData.set("items", items);
};
listview.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:lv="nativescript-pro-ui/listview" loaded="pageLoaded">
<ActionBar title="TableTest" class="action-bar" />
<lv:RadListView id="listview" items="{{ items }}" class="list-group" pullToRefresh="false" pullToRefreshInitiated="pullToRefreshInitiated">
<lv:RadListView.listViewLayout>
<lv:ListViewLinearLayout scrollDirection="Vertical"/>
</lv:RadListView.listViewLayout>
<lv:RadListView.itemTemplate>
<StackLayout>
<Label text="{{ testName }}" />
<Label text="{{ testKlasse }}" class="list-group-item-heading" />
<Label text="{{ testFach }}" class="list-group-item-text" />
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
</Page>
我仍然希望得到一些帮助来从远程源(http)获取我的JSON值。提前谢谢!
答案 2 :(得分:0)
通过从远程源获取JSON来最终确定代码。
var http = require("http");
var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;
var page;
var tests = new ObservableArray([]);
var pageData = new Observable();
exports.pageLoaded = function(args) {
page = args.object;
page.bindingContext = pageData;
http.getJSON("http://www.example.com/mypath/insertfilename.json").then(function(r) {
var testList = r.remotesource; //remotesource = topmost parameter in JSON
for (var i = 0; i < testList.length; i++) {
tests.push({
testName: testList[i].testName,
testKlasse: testList[i].testKlasse,
testFach: testList[i].testFach
});
}
}, function(e) {
console.log(e);
});
// console.dir(tests);
pageData.set("tests", tests);
};