NativeScript ObservableArray 和 ListView（在带有 RadSideDrawer 的 tabview 内）——需要帮助

Question

我正在熟悉 NativeScript，但最近我试图在位于 RadSideDrawer 主要内容中的 TabView 中实现 ListView。在实现这一点时，我现在有点迷失了 Observable 数组并填充了 ListView。我已经尝试查看教程，但不知何故我觉得我做错了什么，如果有人可以调查并帮助我，我将非常感激。

这是我的代码：

landing.xml

  <page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:drawer="nativescript-telerik-ui/sidedrawer"
  xmlns:widgets="common/widgets"
  xmlns:notifications="pages/landing/notifications"
  xmlns:requests="pages/landing/requests"
  xmlns:alln="pages/landing/allnoti"
  loaded="loaded">

  <page.actionBar>
    <actionBar title="iStart">
      <!--- <action-bar.titleView>
        <StackLayout orientation="horizontal" ios:horizontalAlignment="center" android:horizontalAlignment="left">
          <!--<Image src="res://acicon" class="action-image" />
          <Label text="  iStart" class="action-label" />
        </StackLayout>
      </action-bar.titleView> -->
      <actionBar.actionItems>
        <android>
          <actionItem android.position="actionBarIfRoom" tap="toggleDrawer" icon="res://ic_menu" />
        </android>
        <ios>
          <actionItem icon="res://ic_menu" ios.position="right" tap="toggleDrawer" />
        </ios>
      </actionBar.actionItems>
    </actionBar>
  </page.actionBar>

  <drawer:rad-side-drawer id="newdrawer" drawerContentSize="180" drawerLocation="right">
    <drawer:rad-side-drawer.mainContent>

      <!-- Landing page contents -->
      <TabView class="tabview-look" style="font-family: FontAwesome; font-size: 15;" selectedColor="blue">
        <TabView.items>
          <TabViewItem title="&#xf003; All" >
            <TabViewItem.view>
              <alln:allnoti />
            </TabViewItem.view>
          </TabViewItem>
          <TabViewItem title="&#xf0a2; Notifications" >
            <TabViewItem.view>
              <notifications:notifi />
            </TabViewItem.view>
          </TabViewItem>
          <TabViewItem title="&#xf044; Requests" >
            <TabViewItem.view>
              <requests:request />
            </TabViewItem.view>
          </TabViewItem>
        </TabView.items>
      </TabView>

    </drawer:rad-side-drawer.mainContent>
    <drawer:rad-side-drawer.drawerContent>
      <widgets:drawer-content />
    </drawer:rad-side-drawer.drawerContent>
  </drawer:rad-side-drawer>
</page>

landing.ts

import {BasePage} from "../../common/BasePage";
import {Observable, EventData} from "data/observable";
import {View} from "ui/core/view";
import observableM = require("data/observable");
import observableArrayModule = require("data/observable-array");


import {fromObject} from "data/observable";

let pageData = observableM.fromObject({
    'notificationList': new observableArrayModule.ObservableArray([
        {title: "Title1", body: "Body1"},
        {title: "Title2", body: "Body2"}
    ])
});
let vm = new Observable();
class LandingPage extends BasePage{
    mainContentLoaded(args:EventData){
        //set the bindingContext for the LandingPage content here
        let view = <View>args.object;
        view.bindingContext = pageData;
    }
}

export = new LandingPage();

allnoti.xml

<stack-layout loaded="onViewLoaded" unloaded="onViewUnloaded"
xmlns:lv="nativescript-telerik-ui/listview" >
  <!-- entirety of the tab's content -->
  <GridLayout>
    <ListView items="{{notificationList}}">
      <ListView.itemTemplate>
        <stack-layout>
          <label text="{{title}}" horizontalAlignment="left" verticalAlignment="center" />
          <label text="{{body}}" horizontalAlignment="left" verticalAlignment="center" />
        </stack-layout>
      </ListView.itemTemplate>
    </ListView>
  </GridLayout>
</stack-layout>

我想在列表视图中有一个数据绑定，但我真的很困惑，因为层次结构。对不起，如果这是一个新手问题，希望有人能提供帮助。

Answer 1

看来，添加 mainContentLoaded 解决了这个问题。

<TabView class="tabview-look" style="font-family: FontAwesome; font-size: 15;" selectedColor="blue" loaded="mainContentLoaded">

NativeScript ObservableArray 和 ListView（在带有 RadSideDrawer 的 tabview 内）——需要帮助

NativeScript ObservableArray and ListView (inside a tabview with RadSideDrawer) - need assistance

listview

observable

nativescript