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

    DevExtreme 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> DevExtreme下载