framework7 入门（数据绑定）

数据绑定是用template7，官网，framework7内置template7，不用单独下载，下面介绍一些简单的绑定

当你的数据是个数组

return{
        data:function(){
            let item=[
                {name:"jack",age:"18"},
                {name:"tom",age:"19"}
            ]
            return {
                data:item,
                sex:"男"
            }
        }
          }

            
        {{#each data}}       //data是个数组 ，用 #each
        
        <div>Name:{{name}}，Age:{{age}}</div>
        
        <span>{{../sex}}</span>      //sex不是data的子集，要从#each外部取，所以要用 ../sex ，如果#each外部还有父级  ，则用 ../../sex
        
        {{/each}

当你的数据是个object

return{
        data:function(){
            let item={
                name:"jack",
                age:18,                
            }
            return {
                data:item
            }
        }
    }

   <div>{{data.name}},{{data.age}}</div>        
   

 

或者不管是数组还是对象，都可以这样

return{
        data:function(){
            let  people=[
                {
                  name: 'John Doe',
                  age: 18
                },
                {
                  name: 'Mark Johnson',
                  age: 21
                }
              ];
             let props={
                    power: '150 hp',
                    speed: '200 km/h',
                };
            return {
                peoples:people,
                props:props
            }
        }  

        
        {{#peoples}}
            <div>{{name}},{{age}}</div>
        {{/peoples}}
        
        {{#props}}
            {{power}},{{speed}}
        {{/props}}

 

当你的数据是从服务器获取时，上一章讲过我们用$setState，

如果你要绑定的数据是object，并且层级很多的话，需要这样写

return{
        data:function(){
            return {
                data:{},
                obj:{             //为了避免报undefined，要把数据结构写上
                    a:{
                        b:{
                            cc:""
                        }
                    }
                }
            }
        },
        on:{
            pageInit:function(){
                let item={
                    name:"jack",
                    age:18
                };

                let item2={
                    a:{
                        b:{
                            name:"tom"
                        }
                    }
                }
                this.$setState({

                    data:item,

                    obj:item2

                });
            }
        }

        <div>  {{data.name}},{{data.age}} </div>
      

        <div>{{obj.a.b.name}}</div>

 

有时候可能需要对数据进行判断，

 

<template>
    <div class="page">
            
    {{#if data.flag}}         //if能做true或false判断 <div>{{text}}</div> 
    {{else}} 
        <div>False</div> 
    {{/if}}
        
    </div>
</template>
<script>
    return{
        data:function(){
            let item={
                    flag:true                    
                };
            return {
                data:item,
                text:"True"
            }
        }
        
    }    
</script>

 

当你要做些复杂判断，比如表达式的值不是true或者false的时候，就要用 js_if 

<template>
    <div class="page">
{{#data}}

{{#js_if "this.age>=18"}}  //注意用 " " 包起来 this是 对当前上下文的引用
    成年{{sex}}
{{else}}
    未成年{{sex}}
{{/js_if}}

{{/data}}    
    </div>
</template>
<script>
    return{
        data:function(){
            let item={
                    age:18,
                    sex:"男"
                };
            return {
                data:item,                
            }
        }
        
    }    
</script>

有时候可能要对数据进行处理再显示

<template>
    <div class="page">
        {{#data}}
            {{js "this.price*1.2"}}   //注意用 "" 包起来
            {{js "this.buy?'买':'不买' "}}
        {{/data}}
    </div>
</template>
<script>
    return{
        data:function(){
            let item={
                    price:100,
                    buy:true
                };
            return {
                data:item,                
            }
        }
        
    }    
</script>