Nativescript:逻辑控制sideDrawer

Question

你好，大家好！

我试图用Nativescript和Javascript制作一个侧抽屉，显示在导航栏上。

我使用的包是Telerik为Nativescript。

事实是，即使当我使用幻灯片手势时，我可以将显示在导航栏上的抽屉画出来，我也不能通过tap="function()"指令来控制它。

• 这是关于显示在导航上的操作条。的正式文档
• 这是关于抽屉的逻辑控制的正式文档

这是我在nativescript-telerik-ui中的代码(我使用的是免费版本的nativescript-telerik-ui-pro)，而不是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();
};

下面是我在点击toggleDrawer()按钮(执行函数)时遇到的错误：

TypeError: Cannot read property 'toggleDrawerState' of undefined.

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

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

预先谢谢！=)

Answer 1

您可以这样做，这样您就不会依赖于任何全局范围，因为它将接受您只需点击的对象，不管它是什么：

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

Answer 2

我终于修好了！我的加载指令在.xml中调用pageLoaded()，但该函数不存在！它被称为loaded()。

因此，我必须修复“加载”指令：

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

以反映函数的名称

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

或者我可以更改函数的名称以反映指令调用(pageLoaded版本)

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

&

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

谢谢大家的帮助！=D