weex: -2 数据绑定

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

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

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

遍历迭代一组数据, 点击某一列后, 把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获取

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

Paste_Image.png

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

Paste_Image.png

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

//html
    

      

        

          
          {{name}}
        
      
    

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

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

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