Nativescript - 在按钮单击时打开SideDrawer

时间:2016-05-06 10:08:41

标签: nativescript nativescript-telerik-ui

我使用telerik ui作为原生脚本。我需要在顶部的切换按钮打开侧面菜单。但我无法按照文档调用... | [ H : _ -> value _ \/ exists _, ?t1 ==> _ |- context [exists _, ?C ?t1 ==> _ ]] => induction H; auto ... 。 我需要的是按钮点击侧面菜单应该打开。我试过调用Showdrawer(),但失败了。 是否有RadSideDrawer.prototype.showDrawer()的其他侧边菜单?

main-page.xml

Nativescript

得到起动-model.js

<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:drawer="nativescript-telerik-ui/sidedrawer" loaded="pageLoaded">
    <Page.actionBar>
        <ActionBar>
            <android>
                <NavigationButton text="Go Back" android.systemIcon="ic_menu_moreoverflow" tap="showSideDrawer" />
            </android>
        </ActionBar>
    </Page.actionBar>
    <drawer:RadSideDrawer>
        <drawer:RadSideDrawer.mainContent>
            <StackLayout>
                <Label text="{{ mainContentText }}" textWrap="true" />
            </StackLayout>
        </drawer:RadSideDrawer.mainContent>
        <drawer:RadSideDrawer.drawerContent>
            <StackLayout cssClass="drawerContent" style="background-color:white;">
                <StackLayout cssClass="headerContent">
                    <Label text="Header" />
                </StackLayout>
                <StackLayout cssClass="drawerMenuContent">
                    <Label text="Item 1" style="color:black;" />
                    <Label text="Item 2" style="color:black;" />
                    <Label text="Item 3" style="color:black;" />
                    <Label text="Item 4" style="color:black;" />
                </StackLayout>
            </StackLayout>
        </drawer:RadSideDrawer.drawerContent>
    </drawer:RadSideDrawer>
</Page>

main page.js

var observableModule = require("data/observable");
var GettingStartedViewModel = (function (_super) {
    __extends(GettingStartedViewModel, _super);
    function GettingStartedViewModel() {
        _super.call(this);
        this.set("mainContentText", "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component"
            + " has a default transition and position and also exposes notifications related to changes in its state.");

    }
    return GettingStartedViewModel;
})(observableModule.Observable);
exports.GettingStartedViewModel = GettingStartedViewModel;
function showSideDrawer(args) {
    console.log("Show SideDrawer tapped.");
    // Show sidedrawer ...
   _super.prototype.showDrawer.call(this);

}
exports.showSideDrawer = showSideDrawer;

4 个答案:

答案 0 :(得分:2)

您可以查看显示RadSideDrawer主要功能的this SDK examples。正如@R Pelzer所提到的,你需要做的就是使用它的id来获取RadSideDrawer的实例:

console.info=function(x){document.write('<pre>'+JSON.stringify(x,0,3)+'</pre>')}
//--

// compare: return path if a,b are different, null otherwise

function compare(a, b, path) {

    var ta = typeof a,
        tb = typeof b;

    // different types - fail
    
    if (ta !== tb) {
        return path;
    }
    
    // scalars - null if equal, path if not

    if (ta !== 'object') {
        return a === b ? null : path;
    }
    
    // make a set of keys from both objects

    var keys = Object.keys(a).concat(Object.keys(b)).filter(function(x, i, self) {
        return self.indexOf(x) === i;
    });

    // for each key in set, compare values
    
    var res = null;

    keys.some(function(k) {
        return res = compare(a[k], b[k], path.concat(k));
    });

    // return null or the first failed path
    
    return res;
}

//

var Obj1 = {
        p1: 's',
        p2: {
          p1: {a: { propA: 'a', propB: 'b' }},
          p2: 'g',
        }
      };

var Obj2 = {
        p1: 's',
        p2: {
          p1: {a: { propA: 'a', propB: 'c' }},
          p2: 'g',
        }
      };



var res = compare(Obj1, Obj2, [])
console.info(res);

并调用其import drawerModule = require("nativescript-telerik-ui-pro/sidedrawer"); import frameModule = require("ui/frame"); var sideDrawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>(frameModule.topmost().getViewById("sideDrawer")); 方法:

showDrawer()

答案 1 :(得分:1)

您是否从未发布的代码调用showSideDrawer函数?你确定你联系了点按按钮吗?

<Button tap="showSideDrawer" text="ToggleDrawer"/>

也许你可以尝试给sideDrawer一个Id并使用这段代码。

var drawer = frameModule.topmost().getViewById("sideDrawer");
drawer.showDrawer();

答案 2 :(得分:1)

您收到$(function () { $(".datepicker.begin").datepicker({ minDate: '+2d', maxDate: '+2y' }) $(".datepicker.end").datepicker({ minDate: $(".datepicker.begin") + 4d, maxDate: '+2y' }); }); 因为没有为抽屉分配ID,所以为了解决您的问题,请为sideDrawer undefined分配一个ID然后您可以调用

<drawer:RadSideDrawer id="sideDrawer">

答案 3 :(得分:0)

在我的情况下,我错过了插入,因此,当调用toggleDrawer时,有一个缺少的组件,因此错误&#34; TypeError:无法读取属性&#39; toggleDrawerState&#39;未定义&#34;。

尝试在此处插入xml文件的所有正文组件可能会解决问题。

快乐编码:))