?

DevExtreme學習開發 【1】

用HTML開發手機應用，看一哈幫助文檔覺得還很不錯。

在開發前一定要安裝DevExteme? 下載連接地址：

ftp://211.101.1.108/DevExpress/DevExpressDevExtreme-13.1.8.zip

ftp://211.101.1.108/DevExpress/DevExpressPhoneJS-13.1.8.zip

首先創建一個項目：

?1選第一個基本模板[DevExtreme 13.1 Basic Application]。然后指定相應的程序名稱。

?

2創建完成后會看到解決方案。包含以下幾個目錄

• CSS - 通用和特定平臺的樣式表文件的文件夾
• data- 打算把一切相關的數據，例如一個文件夾，變量數據加載/存儲
• JS - 一個文件夾，應用程序所需的所有JavaScript庫
• layouts- 代表的預定義布局的框架文件的文件夾
• View?- 視圖一個文件夾中有兩個樣本的意見 - “Home”和“About”
• app.config.js - 一個文件，該文件包括初始化應用程序使用的配置對象
• index.css - 應用樣式表文件
• index.html的 - 應用程序所需的所有資源文件鏈接的
• index.js - 一個文件中創建和配置的HtmlApplication對象

?3然后運行程序以瀏覽器的形式

可以在里面切換不用的移動平臺。

找到VIEW 文件夾。然后創建一個NewView。

添加dxList控件。

<div data-options="dxView : { name: 'NewView', title: 'NewView' } "><div data-options="dxContent : { targetPlaceholder: 'content' } "><div><div data-bind="dxTextBox: { mode: 'search', value: searchString,
visible: showSearch, valueUpdateEvent: 'search change keyup' }"></div></div><div data-bind="dxList: { dataSource: dataSource}"><div data-options="dxTemplate: { name:'item'}"data-bind="text: 'name', dxAction: '#ProductDetial/1'"></div></div></div><div data-bind="dxCommand: {title: 'Search',placeholder:'Search...',location:'create',icon:'find',action:find }"></div> </div>

然后給DxList控件賦值。它這個值就是Josn格式的數據。

Application1.NewView = function (params) {var viewModel = {searchString: ko.observable(''),find:function() {viewModel.showSearch(!viewModel.showSearch());alert("serachIng");},showSearch: ko.observable(false),categoryId: params.id,dataSource: [{ id: 1, name: 'Wisky', category_id: 1 }]};return viewModel; };

然后在創建一個Detial頁面;

<div data-options="dxView : { name: 'product_details', title: 'Product' } " ><div data-options="dxContent : { targetPlaceholder: 'content' } " ><div class="dx-fieldset"><div class="dx-field"><div class="dx-field-label">Id: </div><div class="dx-field-value" data-bind="text: id"></div></div><div class="dx-field"><div class="dx-field-label">Name: </div><div class="dx-field-value" data-bind="text: name"></div></div></div></div> </div>

JavaScript代碼：

Application1['product_details'] = function(params) {var viewModel = {id: params.id,name: ko.observable('')};return viewModel; };

然后運行一哈效果：

然后點擊列跳轉到Detial頁面

?由于研究了半個小時。還沒有搞的太懂。

?

?

轉載于:https://www.cnblogs.com/w2011/p/3421869.html

總結

以上是生活随笔為你收集整理的DevExtreme 学习应用[1]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。