### 表達式
*view(data.js)的所有屬性值支持表達式語法*
*表達式可以支持js語法,見下面示例*
* 綁定state中path為data.content的數據
~~~js
{
...
value: `{{data.content}}` //value = state.data.content
...
}
~~~
* 綁定action中方法名為onChange的函數
~~~js
{
...
onChange:`{{$onChange}}` // onChange = action.$onChange
...
}
~~~
* 函數體
~~~js
{
onChange: `{{{
debugger;
return $onChange
}}}`
/*
onChange = new Function(`
debugger;
return action.onChange
`)()
*/
}
~~~
## data.js中ttk預置了哪些系統屬性?(***)
```
{
component: 'div',
children: 'hello',
_visible: 'true'
}
```
這里說的系統屬性就是上面例子中的component、children、\_visible等; 除系統屬性外還可以設置控件支持的任何屬性; 主要支持下面描述的幾種系統屬性;
* component 組件名,缺省可使用所有html元素
~~~js
{ component: 'div' } //<div></div>
~~~
* children 子組件
~~~js
{
component: 'div'
children: {
component: 'div',
children: 'children'
}
}
/*
<div>
<div>chidlren</div>
</div>
*/
~~~
* \_visible 是否顯示,值支持表達式, 默認true
~~~js
{
component: 'div',
_visible: false
}
~~~
* \_power 循環,支持嵌套,用于數據的遍歷
~~~
const state = {
data: {
list: [{a:1}, {a:2}, {a:3}]
}
}
const view = {
component: 'div',
children: {
_power: 'for in data.list', // or (item,index) in data.list
component: 'div',
children: '{{data.list[_rowIndex].a}}'
}
}
~~~
*\_visible設置為false,將不創建該組件*
- 序言
- 環境搭建
- node環境安裝
- npm國內源切換
- git知識學習
- git安裝
- git基本操作
- gitSSH配置
- vscode安裝使用
- 安裝
- git使用
- 前端開發環境
- 安裝腳手架及創建頁面
- 框架源碼目錄結構
- 相關API
- 項目啟動
- 如何運行
- 如何兼容到IE8
- 啟動參數說明
- IE8環境下兼容總結
- 注意的效率問題
- 框架亮點
- 相關技術棧介紹
- 功能強大的UI組件庫
- 數據驅動視圖
- 通用的公共類庫
- 組件視圖生成器
- 嵌入第三方站點
- 簡單易用-react
- 簡單易用-redux
- 1分鐘入門示例(hello world)
- 高級概念
- 入門概念
- 高級概念-1
- 前后端聯調
- 其它常用場景
- 詳細介紹(action、data、reducer)
- action.js
- data.js
- reducer.js
- 進階
- Mock數據
- 引入第三方插件
- 模塊拆分
- iframe接入
- 頁面模型生成器
- webpack@3升級到4.x
- 生產部署
- 生產打包
- nginx部署
- tomcat部署
- hbuilder打包部署
- nodejs部署
- docker部署
- 常見問題
- 兼容IE8
- 自動升級
- 貢獻模板
- 瀏覽器支持統計
- 前端調試
- 注意事項(重要)
- 內存泄漏
- JavaScript內存那點事