带有Nativescript-telerik-ui幻灯片抽屉的toggleDrawerState

时间:2016-08-30 22:02:20

标签: javascript telerik nativescript nativescript-telerik-ui

我使用最新版本的Telerik-Nativescript-UI(版本1.3.1)。此更新版本应支持操作栏重叠。我使用显示here的示例来重新处理我现有的抽屉实现。我遇到的问题是我曾经完全正常运行的切换抽屉按钮在更新后不再有效。我尝试调用toggleDrawerState()来处理这个问题,但是当我尝试获取对抽屉的引用时,它失败了。我的另一个问题是抽屉内容不再从我的窗口小部件目录加载下面是我的代码的示例

XML视图

  <dpg:DrawerPage
    navigatedTo="onNavigatedTo"
    navigatingTo="navigatingTo"  
    xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
    xmlns:drawer="nativescript-telerik-ui/sidedrawer"
    xmlns:widgets="shared/widgets"
    xmlns="http://www.nativescript.org/tns.xsd">

  <page.actionBar>
    <action-bar title="{{L('connections')}}">
      <!--<NavigationButton  icon="res://back" tap="goBack" ios:visibility="collapsed" />      -->
      <NavigationButton  icon="res://menu" tap="toggleDrawer" ios:visibility="collapsed" />
      <action-bar.actionItems>
        <ios>
          <action-item icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
        </ios>
      </action-bar.actionItems>
    </action-bar>
  </page.actionBar>

  <dpg:DrawerPage.sideDrawer id="">
    <drawer:RadSideDrawer id="drawer">
      <drawer:RadSideDrawer.drawerContent>
        <widgets:drawer-content />
      </drawer:RadSideDrawer.drawerContent>
    </drawer:RadSideDrawer> 
  </dpg:DrawerPage.sideDrawer>

    <StackLayout cssClass="mainContent">
        <Label text="test test test" textWrap="true" cssClass="drawerContentText"/>

    </StackLayout>
</dpg:DrawerPage>

JS,我试图切换抽屉

SideDrawer.prototype.toggleDrawer = function() {
  var page = topmost().currentPage;
  page.getViewById("drawer").toggleDrawerState();
};

显然试图通过获取附加到the<drawer:RadSideDrawer id="drawer">的ID来访问抽屉是不正确的,希望有人可以指出我正确的方向。

1 个答案:

答案 0 :(得分:1)

在您使用RadSideDrawer的“show over ActionBar”功能的情况下,您不再将RadSideDrawer添加到网页的content,而是添加到自定义{{1}的属性},这就是为什么你不能再使用Page的DrawerPage方法了。在这种情况下,您可以简单地将Page转换为DrawerPage并直接使用其.getViewById()属性,该属性是XML中声明的RadSideDrawer。例如:

sideDrawer