javascript - Nativescript:逻辑控制sideDrawer

Question

大家好!

我正在尝试使用 Nativescript 和 Javascript 制作一个显示在导航栏上的侧抽屉。

我使用的软件包是Telerik Ui for Nativescript .

事实是，即使我可以在使用滑动手势时使抽屉显示在导航栏上，我也无法通过 tap="function()" 指令控制它。

• 这是 action bars that are shown over the navigation 的官方文档

• 这是 logic control of the drawer 的官方文档

这是我在 main-page.xml 中的代码(我使用 nativescript-telerik-ui 这是免费版本，而不是 nativescript-telerik-ui -pro)

<dpg:DrawerPage loaded="pageLoaded" navigatedTo="onNavigatedTo"  
xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
xmlns:drawer="nativescript-telerik-ui/sidedrawer"
xmlns="http://www.nativescript.org/tns.xsd">
<navigation.actionBar>
  <ActionBar title="Drawer Over Navigation" />
</navigation.actionBar>

<dpg:DrawerPage.sideDrawer>
<drawer:RadSideDrawer id="drawer">
  <drawer:RadSideDrawer.drawerContent>
    <StackLayout cssClass="drawerContent">
      <StackLayout cssClass="headerContent">
        <Label text="Navigation Menu"/>
      </StackLayout>
      <ScrollView>
        <StackLayout cssClass="drawerMenuContent">
          <Label text="Primary" cssClass="drawerSectionHeader" />
          <Label text="Social" cssClass="drawerSectionItem" />
          <Label text="Promotions" cssClass="drawerSectionItem" />
          <Label text="Labels" cssClass="drawerSectionHeader" />
          <Label text="Important" cssClass="drawerSectionItem" />
          <Label text="Starred" cssClass="drawerSectionItem" />
          <Label text="Sent Mail" cssClass="drawerSectionItem" />
          <Label text="Drafts" cssClass="drawerSectionItem" />
        </StackLayout>
      </ScrollView>
    </StackLayout>
  </drawer:RadSideDrawer.drawerContent>
</drawer:RadSideDrawer> 
</dpg:DrawerPage.sideDrawer>

<StackLayout cssClass="mainContent">
    <Label text="{{ exampleText }}" textWrap="true" cssClass="drawerContentText"/>
    <Button text="Toggle Drawer" tap="toggleDrawer" />
</StackLayout>
</dpg:DrawerPage>

这是我的main-page.js

var drawer;

exports.loaded = function(args) {
var page = args.object;
drawer = page.getViewById("drawer");
};
exports.toggleDrawer = function() {
drawer.toggleDrawerState();
};

点击Toggle Drawer按钮(执行toggleDrawer()函数)时遇到的错误如下:

类型错误:无法读取未定义的属性“toggleDrawerState”。

也许你可以帮我猜猜这里发生了什么，因为我现在对这个错误很困惑。

请告诉我可以提供的任何其他信息，以使这个问题更清楚。

提前致谢! =)

Answer 1

您可以这样做，这样您就永远不会依赖于任何全局范围，因为它会获取您刚刚点击的对象，无论它是什么:

exports.toggleDrawer = function(args) {
    var drawer = args.object;
    drawer.toggleDrawerState();
};