ViewBind.js for guide, base on jQuery bi-bind

绑定的指令 directive provided

    ```
    vb-modalname="key"      组件块的modalname绑定
    vb-model="key"          表单元素的双向绑定
    vb-item="subKey"        数组遍历时的值绑定

    vb-if vb-show vb-hide   显隐与存在
    vb-value                为元素绑定添加value属性
    vb-class                条件class
    vb-entity               将值转化为实体
    vb-cloak                解析前不显示
    ```

Demo1: Dead Simple Example

html

<p> <span>age:</span> <span vb-user="age"></span> </p> <input vb-user="age">

js

var vb1 = new ViewBind({ modelId: 'user', $el: '#demo1', data: { name: 'joe', age: 18 } });

age:

Demo2: Render List

html

<div id="demo2"> <ul class="list-group" vb-user="users"> <li class="list-group-item"> <strong vb-item="name"></strong> <span vb-item="age"></span> </li> </ul> </div>

js

var vb2 = new ViewBind({ modelId: 'user', $el: '#demo2', data: { users: [{ name: 'joe', age: 18 }, { name: 'kate', age: 22 }, { name: 'laowang', age: 5 }] } });

Demo3: Render Nested List

html

<div id="demo3"> <h5 vb-user="title"></h5> <ul class="list-group" vb-user="users"> <li class="list-group-item"> <strong vb-item="name"></strong> <span vb-item="age"></span> <span vb-item="sex"></span> </li> <ol class="sub" vb-item="children"> <li> <strong vb-item="name"></strong> <span vb-item="age"></span> </li> </ol> </ul> </div>

js

var vb3 = new ViewBind({ modelId: 'user', $el: '#demo2', data: { title: 'this is a Render Nested List demo', users: [{ name: 'joe', age: 18, sex: 1, children: [{ name: 'subjoe', age: 5 }] }, { name: 'kate', age: 22, sex: 0, children: [{ name: 'subjoe', age: 5 }, { name: 'everyone', age: 3 }] }] }, entity: { 'sex': function(value) { return value === 1 ? 'male' : 'female'; } } });

Demo4: partial and global update components

partial update: vb3.set('title', 'this is updated title'); global update: vb3.set(updateVB3Data);

Demo5: Form bind

form type elements use vb-modelname="key" for bi-bind vb.data.key, and has vb-model="key2" to sync with key

html

<input type="text" vb-formdemo="selectedValue"> <select vb-formdemo="selectList" vb-model="selectedValue" vb-key="id"> <option vb-value="$values.id" vb-item="name"> </option> <span>选择的值是(selected value is):</span> <span vb-formdemo="selectedValue"></span> </select>

js

var vb5 = new ViewBind({ modelId: 'formdemo', $el: '#demo5', data:{ selectList: [{name: 'joe', id:1}, {name: 'smith', id:2}, {name: 'blue', id:3}] selectedValue: 2 } })


选择的值是(selected value is):

Demo6: A full components code

    
    new ViewBind({
        modelId: 'user',
        $el: '#root',
        data: { name: 'joe', age: 18 },
        entity: { 
           //u can alse user entity for this ViewBind or user vb-entity="value === 1 ? 'male' : 'female'"
           'sex': function(value) { return value === 1 ? 'male' : 'female'; } 
        },
        events: {
            'click .user': 'setUser',
            'click .pwd': function(e, elem, that) {}
        },
        watch:{
            'age': function(newval, oldval){}
        },
        created: function(){},  //before render
        attached: function(){}, //after render
        setUser: function(e, elem) {}
    });