flute-tmpl

FLUTE 数据模板

特点

• 简单

• 支持 ie6+

用法

• api

var FluteTmpl ＝ require('flute-tmpl');

var f = new FluteTmpl(selector,[data]);

f.set({
  key1:value1,
  key2:value2
},[sync:false]);

f.set(key,value,[sync:false]);

f.get(key);

f.watch(exp,function(value,oldValue){
  
})

• 属性 f-*

当有不标准的内容时，使用 f-style 代替 style

  <!--error-->
  <div style="background:{{value}}">
  
  <!--ok-->
  <div f-style="background:{{value}}">

如果不希望有多余的错误 http 请求，采用 f-src 代替 src

  <!--make an http request "{{value}}"-->
  <img src="{{value}}">
  
  <!--ok-->
  <img f-src="{{value}}">

使用 f-event 可以绑定原生的 DOM 事件

<div class="detail">

    name: {{name}}
    age: {{age}}

    <button f-event="onclick:submit(name,age)">
    
</div>


<script>
  var f = new FluteTmpl('div')
  f.set({
    name:'jack',
    age:20,
    submit:function(name,age){
      alert(name+' '+age);
    }
  })
</script>
    

f-each , f-if , f-else

<div f-each="list">

  {{$index}} {{$value}}

</div>

<div f-each="list as value i">

  {{i}} {{value}}

</div>

<div f-if="num>1">
  
  num > 1

</div>

<div f-if="num>1">
  num > 1
  
  <div f-else>
    num <= 1

</div>

示例

• 基本用法:

<div>
  {{name}}
</div> 

<div class="detail">

    name: {{name}}
    age: {{age}}

    <button f-event="onclick:submit(name,age)">
    
</div>


<script>
  var f = new FluteTmpl('div')
  f.set({
    name:'jack',
    age:20,
    submit:function(name,age){
      alert(name+' '+age);
    }
  })
</script>

调试

$ make install
$ make debug