2017-01-27 2 views
1

NativeScriptについて知り合っていますが、最近はRadSideDrawerメインコンテンツの中にあるTabViewの中にListViewを実装しようとしていました。これを実装している間、私は今Observable配列で失われていて、ListViewにデータが取り込まれています。私はチュートリアルを見てみましたが、どういうわけか、私は何か間違っていると感じています。誰かがこの問題を調べて助けてくれれば、私は非常に義務づけられます。ここでNativeScript ObservableArrayとListView(RadSideDrawerのタブビューの内側) - 助けが必要です

が私のコードです:

<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> 

landing.xml私はデータバインディングを持つようにしたいですリストビューでは、私は本当に階層のために混乱している。申し訳ありませんが、これが初心者の質問であれば、誰かが助けてくれることを願っています。

答えて

0

mainContentLoadedを追加すると問題が解決したようです。

<TabView class="tabview-look" style="font-family: FontAwesome; font-size: 15;" selectedColor="blue" loaded="mainContentLoaded"> 
関連する問題