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