DevExpress DXTREME使用教程：如何在应用程序中进行视图设置-控件新闻-慧都网

DevExpress DXTREME使用教程：如何在应用程序中进行视图设置

原创|使用教程|编辑：郝浩|2013-03-18 13:37:25.000|阅读 789 次

概述：DXTREME HTML JS 框架生成的应用程序是一个单页面应用程序，虽然这样的应用程序只有一个 web 页，它可以包含定义为命名视图的多个应用程序屏幕。

相关链接：

DXTREME ENTERPRISE HTML JS 框架生成的应用程序是一个单页面应用程序，虽然这样的应用程序只有一个 web 页，它可以包含定义为命名视图的多个应用程序屏幕。在Web浏览器中的应用程序，一个视图的名字被编码到应用程序URL的片段标识符上。

通过一块窗体视图模板的 HTML 标记定义该视图，这个视图可以由JavaScript代码选择，或是用一个关联的样式表自定义外观和风格。

在默认的情况下，框架使用KnockoutJS绑定数据到视图模版，关联的JavaScript代码准备 ViewModel，并执行设置视图所需的额外操作。这些操作包括与 web 服务器和后续呈现的视图互动。

若要创建一个视图，使用一个 div 元素来查看标记，设置元素的关于视图的data-dx-role，分配视图名称到data-dx-name属性。

<div data-dx-role="view" data-dx-name="index">
 <h1 data-bind="text: message"></h1> 
</div>

为了声明视图的一个ViewModel，在你的应用程序命名空间上用视图名称声明一个功能。这是通过 ns 配置对象传递给 HtmlApplication 构造函数的参数指定的命名空间。

MyApp.index = function(params) {
  return
  {
     message: "Hello World!"
   };
 };

你可以通过声明数据属性，来从关联标记中扩展ViewModel。例如，在下面的代码段中，将使用Home Screen值，运行时在索引视图模型中创建一个标题属性。

<div data-dx-role="view" data-dx-name="index" data-dx-title="Home Screen">
 <h1 data-bind="text: message"></h1> 
</div>

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@hmdbvip.cn

文章转载自：慧都控件