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>