weex: -2 数据绑定

{{}}双大括号数据绑定,

可以在属性: class, value, style, 标签中的元素等,
只要js数据中有对应的data

<template>
  <div>
    <text class="{{size}}">Hello</text>
    <text class="title {{status}}">World</text>
  </div>
</template>
<style>
  .large { font-size: 64; }
  .small { font-size: 32; }
  .title { font-weight: bold; }
  .success { color: #00ff00; }
  .error { color: #ff0000; }
</style>
<script>
  module.exports = {
    data: {
      size: 'large',
      status: 'success'
    }
  }
</script>

if 和vue的if使用方法相似, 但是循环迭代, weex使用的是repeat, 也包括值和键

<template>
  <list class="list">
    <cell class="row" repeat="(index, item) in rows" index="{{$index}}">
      <text class="item-title">row {{item.id}} -- {{index}}</text>
    </cell>
  </list>
</template>

<style></style>

<script>
module.exports = {
  data: {
    rows:[
      {id: 1},
      {id: 2},
      {id: 3},
      {id: 4},
      {id: 5},
      {id: 6}
    ]
  }
}
</script>

遍历迭代一组数据, 点击某一列后, 把index,传入方法, 进行其他操作的方式

主要使用事件中的 $event, console.log($event), 后看其属性

Object
_alreadyTriggered: true
isTrusted: true
target: Element
  attr: Object        
    index: 2              //主要看这里, 这里有属性, 和标签上的属性一样的
    value: "row 3 -- 2"      //这是标签内渲染的结果
__proto__: Object
children: Array[0]
classStyle: Object        //粘贴过来成这样了,下面的不一一改了, 自己log出来自家看
depth
:
3
docId
:
"http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=hello.js&loader=xhr"
event
:
Object
nextSibling
:
undefined
nodeId
:
"12"
nodeType
:
1
ownerDocument
:
Document
parentNode
:
Element
previousSibling
:
undefined
pureChildren
:
Array[0]
ref
:
"12"
style
:
Object
type
:
"text"
__proto__
:
Node
timestamp
:
1487061128774
type
:
"click"
__proto__
:
Object

源代码展示, 这样点击任何一行text都会把其index获取

<template>
  <list class="list">
    <cell class="row" repeat="(index, item) in rows" index="{{$index}}">
      <text class="item-title" index={{index}} onclick="log($event)">row {{item.id}} -- {{index}}</text>
      <text class="nextSibing" b={{index}}>{{index}}</text>
    </cell>
  </list>
</template>

<style></style>

<script>
module.exports = {
  data: {
    rows:[
      {id: 1},
      {id: 2},
      {id: 3},
      {id: 4},
      {id: 5},
      {id: 6}
    ]
  },
  methods: {
    log:function(item) {
      console.log(item)
    }
  }
}
</script>

$event还有下一个节点的信息(属性及渲染的元素) $event.target.nextSibing.attr.属性名

Paste_Image.png

还有父级, 下一个兄弟节点, 上一个兄弟节点, 等

Paste_Image.png

<template>
  <div lal="abs">
    <text popo="popo">popo</text>
    <text index=1 onclick="update($event, 1, 2)">Result: {{result}}</text>
    <text papa="bobo">bobo</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      result: '<empty>'
    },
    methods: {
      update: function (e, x, y) {
        console.log(e);
        this.result = e.type + (x + y)
      }
    }
  }
</script>

数据格式被解析时, 会自动按view的层级解析,

//html
    <div class="conentTop">
      <div class="" repeat={{topItem}}>
        <div class="" repeat={{data}}>
          <image src={{yifu}} style="width: 66; height: 66;"></image>
          <text>{{name}}</text>
        </div>
      </div>
    </div>

//script
  module.exports = {
    data:{
      //数据
      topItem: [
        {data:[{name: '连衣裙'},{name: '连衣裙e'},{name: '连衣裙f'},{name: '连衣裙'}]},
        {data:[{name: '连衣裙'},{name: '连衣裙'},{name: '连衣裙'},{name: '连衣裙'}]}
      ],
      name:'单独写在外面的name',
  }
}

• 看上面的数据层级 ,在页面遍历迭代时, 会根据嵌套自动解析对应的数据,

• 单独写在外面的name,没有被调用