DevExpress方案式技术服务正式上线!

DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:023-68661681

DevExtreme教程:命令详解

来源:慧都控件网   发布时间:2014-09-11   浏览:5556次

    命令主要是关联当前视图的一个抽象操作,帮助生产出真正有着本地化外观和风格的跨平台应用程序,来看一下 DevExtreme 中的命令。

    来看一个例子,假设您有一个视图,在为iPhone设计的应用程序中包含“搜索”和“添加”按钮。“搜索”按钮位于标题栏的左侧,“添加”按钮位于标题栏的右侧。如果说你想要在android 手机上使用这个应用程序,或者是在底部的导航栏上显示“添加”按钮,同时,由于这款手机有内置硬件的“搜索”按钮,你不想在屏幕上显示“搜索”按钮。因此,在 iOS 设备上,您需要两个工具栏项目,同时在Android设备上你也需要一个单独的导航栏项目。你不仅需要两个不同的布局,还需要创建管理在这些平台上的不同的组件。

    代替在不同平台上的手动的管理,你可以为视图定义两个命令,现在你有一个单一的视图,可以同时在iPhone 和 Android 设备上正常工作,并且提供本机的用户体验。

    若要声明一个命令,创建一个空的 div 元素。将该元素的data-dx-role设置为命令,并使用 dxCommand KnockoutJS 绑定到下面指定的命令选项。

Action

当命令执行的时候,调用ViewModel function的名字。

Location

布局位置,用于控制命令的可用性和位置。

Title

命令标题。

<div data-dx-role="view" data-dx-name="details">
 <div data-dx-role="command" 
    data-bind="dxCommand: { action: add, location: 'create', title: 'Add' } "></div>
 <div data-dx-role="command" 
    data-bind="dxCommand: { action: search, location: 'back', title: 'Search' } "></div> 
</div>

    为了可以正常的工作,代码片段包含了在ViewModel 中出现的“搜索”和“添加”功能。此外这个视图显示在定义了“Back” 和“Add”位置的布局上,Navbar内置布局就是一个这种布局的例子:

    要在在自定义布局中支持命令,需要在布局中声明 dxList、 dxNavBar 或 dxToolbar组件。设置组件的data-dx-command-container属性值到一个位置列表再映射到组件,使用一个分号隔开。

    dxToolbar组件必须有data-dx-left-locations或者是data-dx-right-locations属性,data-dx-left-locations属性列出了分配给左边的工具栏的位置,data-dx-right-locations属性列出了分配到工具栏的右侧的位置。

    下面的代码片段演示了一个支持命令的自定义布局,声明了一个工具栏的布局有两个命令位置“back”和“create”。命令分配给“back”的位置都显示在左边的工具栏,分配给“create”的位置都显示在右侧的工具栏。

<div data-dx-role="layout" data-dx-name="myLayout">
 <div data-dx-placeholder="header">
   <div data-bind="dxToolbar: {}" 
       data-dx-command-container="back: { showIcon: false }, create: { showText: false }" 
       data-dx-left-locations="back" data-dx-right-locations="create"> </div>
 </div> 
</div>
>>DevExtreme下载 

本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/531.html

联系我们
  • 重庆总部 023-68661681 400-700-1020
购买
  • sales@evget.com
合作
  • business@evget.com


在线
客服
在线
QQ
电话
咨询
023-68661681
返回
顶部