2017-01-30 9 views
1

共有SideDrawerの実装に問題があります。私はこの記事を以下ましたhttps://www.nativescript.org/blog/a-deep-dive-into-telerik-ui-for-nativescripts-sidedrawerNativescript RadSideDrawer undefined

メインページXML:

<Page 
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:sd="nativescript-telerik-ui/sidedrawer" loaded="pageLoaded"> 
    <Page.actionBar> 
    <ActionBar class="action-bar" title="Manu"> 
     <android> 
     <NavigationButton icon="res://ic_menu" tap="toggleDrawer" /> 
     </android> 
     <ios> 
     <ActionItem icon="res://ic_menu" ios.position="left" tap="toggleDrawer" /> 
     </ios> 
    </ActionBar> 
    </Page.actionBar> 
    <sd:RadSideDrawer id="sideDrawer"> 
    <sd:RadSideDrawer.drawerContent 
     xmlns:Drawer="Views/SideDrawerView"> 
     <Drawer:SideDrawerView /> 
    </sd:RadSideDrawer.drawerContent> 
    </sd:RadSideDrawer> 
    <StackLayout> 
    <Label text="{{ sync }}" /> 
    </StackLayout> 
</Page> 

メインページ分離コード:

import { EventData } from 'data/observable'; 
import { Page } from 'ui/page'; 
import { MainViewModel } from '../../ViewModels/MainViewModel'; 

let frameModule = require("ui/frame"); 
let view = require("ui/core/view"); 
let page: Page; 

export function pageLoaded(args: EventData) { 
    page = <Page>args.object; 
    page.bindingContext = new MainViewModel();  
} 

export function toggleDrawer() { 
    let drawer: any = view.getViewById(page, "sideDrawer"); 
    drawer.toggleDrawerState(); 
}; 

SideDrawerのXML:だから

<StackLayout class="sidedrawer-left" loaded="drawerViewLoaded"> 
    <StackLayout class="sidedrawer-header"> 
     <Label text="Hello RadSideDrawer!" class="sidedrawer-header-brand" /> 
    </StackLayout> 
    <StackLayout class="sidedrawer-content"> 
     <Label text="QrScanner" class="sidedrawer-list-item-text" tap="qrScan" /> 
     <Label text="New Item" class="sidedrawer-list-item-text" tap="nItem" /> 
     <Label text="Edit Item" class="sidedrawer-list-item-text" tap="eItem" /> 
     <Label text="Users" class="sidedrawer-list-item-text" tap="openUsers" /> 
     <Label text="Map" class="sidedrawer-list-item-text" tap="map" /> 
    </StackLayout> 
</StackLayout> 

、私は実際にタップすると、コールtoggleDrawer関数

export function toggleDrawer() { 
    let drawer: any = view.getViewById(page, "sideDrawer"); 
    drawer.toggleDrawerState(); 
}; 

ドロワーは定義されていません。何が間違っていますか?

答えて

1

この方法を試してみてください:)あなたはタップイベントを持っているとして、あなたはtoggleDrawer内のタップイベントデータを取得し、argsから取得することができますが、制御したり、frameModuletopmost()機能

export function toggleDrawer (args: EventData) { 
    //this way 
    let page = <Page>(<any>args.object).page; 
    //or this way 
    let page = frameModule.topmost(); 
    //at last get drawer content at page 
    let drawer: any = page.getViewById("sideDrawer"); 
    drawer.toggleDrawerState(); 
}; 
+0

ありがとう、私は問題を解決しました。以下のコメントを読んでください。 – Xoyce

+0

@Xoyceこのコメントに?どこに? –

+0

http://stackoverflow.com/a/41936602/6188082 – Xoyce

0

を使用してsideDrawerにアクセスできる場所からタップしたオブジェクトのpage私は、代わりにsd:RadSideDrawer.drawerContentというページ要素内にカスタムコンポーネントを宣言することで問題を解決しました。

<Page 
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:sd="nativescript-telerik-ui/sidedrawer" 
    xmlns:Drawer="Views/SideDrawerView" loaded="pageLoaded"> 
関連する問題