Neighbourhood Party Manager

    flute-tmpl

    0.2.1 • Public • Published

    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

    Keywords

    none

    Install

    npm i flute-tmpl

    DownloadsWeekly Downloads

    6

    Version

    0.2.1

    License

    MIT

    Last publish

    Collaborators

    • zinkey