JXML

JXML 是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

用以下一些简单的示例：

数据绑定

  1. <!--jxml-->
  2. <view> hello {{name}} </view>
  1. // page.js
  2. Page({
  3.   data: {
  4.     name: 'cortana'
  5.   }
  6. })

列表渲染

  1. <!--jxml-->
  2. <view jd:for="{{array}}"> {{item}} </view>
  1. // page.js
  2. Page({
  3.   data: {
  4.     array: ["苹果", "香蕉", "橘子", "西瓜"]
  5.   }
  6. })

条件渲染

  1. <!--jxml-->
  2. <view jd:if="{{type == 1}}"> 类型 1 </view>
  3. <view jd:elif="{{view == 2'}}"> 类型 2 </view>
  4. <view jd:else="{{view == 3}}"> 类型 3  </view>
// page.js
Page({
  data: {
    type: 1
  }
})

模板

<!--jxml-->
<template name="cat">
  <view>
    age: {{name}}, age: {{age}}
  </view>
</template>

<template is="cat" data="{{...cat1}}"></template>

// page.js
Page({
  data: {
    cat1: {name: 'blue', age: '2'},
  }
})

事件

<view bindtap="getDate"> {{date}} </view> //点击事件 bindtap

Page({
  data: {
    date: ""
  },
  getDate: function(e) {
    this.setData({
      date: new Date()
    })
  }
})

具体的能力以及使用方式请在以下章节查看：

数据绑定、列表渲染、条件渲染、模板、事件、引用