在列表视图中显示数组的值

Question

在看了很多教程并尝试了很多代码片段之后，我仍然对何时以及如何使用 ObservableArray 和绑定感到困惑。试图从我的 json 数组中获取值的列表视图 - 警报显示它们，控制台显示我认为会的。唯一不起作用的是我的列表视图。请任何人提供任何帮助！在下面发布了我的 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>

Answer 1

尝试将您的 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>

Answer 2

修改所有内容后，现在可以使用了。

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>

Answer 3

通过从远程源获取 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);
    };

在列表视图中显示数组的值

display values of array in listview

javascript

json

listview

nativescript