Nativescript：逻辑控制sideDrawer答案

【问题标题】：Nativescript: Controlling sideDrawer logicallyNativescript：逻辑控制sideDrawer
【发布时间】：2016-10-07 14:24:14
【问题描述】：

大家好！

我正在尝试使用导航栏上显示的 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） p>

<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() 函数）时遇到的错误是下一个：

TypeError: Cannot read property 'toggleDrawerState' of undefined.

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

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

提前致谢！ =)

【问题讨论】：

问题是您尝试过早获取 RadSideDrawer 实例。为避免此问题，您应该在 onNavigatedTo 页面事件上初始化 drawer。你应该把这个drawer = page.getViewById("drawer"); 行移到onNavigatedTo
感谢您的回答！ =D 我有点困惑；我的抽屉定义在我的 .js 中，我的“onNavigatedTo”事件在我的 .xml 中。我怎么能把它们绑在一起？

标签： javascript telerik nativescript

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我终于修好了！我的 .xml 中的“loaded”指令正在调用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

【讨论】：