Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>viewbind.js Demo</title>
    <script src="https://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
​
<div id="root">
        <h5>demo render and events</h5>
        <span>vb-user="name":</span> <span vb-user="name"></span><br>
        <span>vb-user="pwd":</span> <span vb-user="pwd"></span> <br>
        <label for="">input auto change user.name value<input vb-user="name"/></label>
        <button class="user">change user.name by events</button>
        <button class="pwd">change user.pwd by events</button>
​
​
        <h5>demo list html</h5>
        <div vb-user="users">
            <ul  vb-user="users">
                <li>
                <strong vb-item="name"></strong> |
                <span  vb-item="pwd"></span> | 
                <span  vb-item="sex"></span>
                </li>
            </ul>    
        </div>
    </div>
</body>
</html>
 
if(!Function.prototype.bind){Function.prototype.bind=function(a){if(typeof this!=="function"){throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable")}var e=Array.prototype.slice.call(arguments,1),c=this,d=function(){},b=function(){return c.apply(this instanceof d?this:a||this,e.concat(Array.prototype.slice.call(arguments)))};d.prototype=this.prototype;b.prototype=new d();return b}}var ViewBind=function(a){$.extend(this,a);this.modelId=a.modelId;this.$el=typeof a.$el==="string"?$(a.$el):a.$el,this.data=typeof a.data==="function"?a.data():(a.data||{});this.view=this.$el?$(this.$el.html()):$(a.view);this.events=a.events;this.init()};ViewBind.prototype={init:function(){this.render();this.vb=this.bind();this._parseEvent()},set:function(a,b){if(arguments.length>1){this.data[a]=b;this.vb.trigger(this.modelId+":change",[a,b])}else{this.data=a;this.vb.trigger(this.modelId+":change",[a])}},get:function(a){return this.data[a]},selector:function(a){return"[vb-"+this.modelId+(a?("="+a):"")+"]"},elem:function(a){return this.$el.find(this.selector(a))},bind:function(){var b=jQuery({});var d=this.modelId+":change";var a="vb-"+this.modelId;this.$el.on("input change",this.selector(),function(e){var f=$(this);b.trigger(d,[f.attr(a),f.val()])});var c=this;b.on(d,function(f,e,g){if(!g){c.render();return}c.elem(e).each(function(){c.setElemValue($(this),g,e)})});return b},setElemValue:function(c,b,a){if(!c.length){return}if($.isArray(b)){this.tmplList(c,b,a);return}this.processElemBind(c,b,a)},tmplList:function(f,d,b){var c=this;var e=f.children(),a,g;f.empty();$.each(d,function(h,i){$.each(i,function(j,k){g="[vb-item="+j+"]";a=e.filter(g).add(e.find(g));c.processElemBind(a,k,j);e=e.clone()});f.append(e)})},processElemBind:function(c,b,a){this.setval(c,this.processEntity(c,b,a),a);c.addClass(this.processBindKey(c,b,"class"))},setval:function(c,b,a){if(c.is("input, textarea, select")){c.val(b)}else{c.html(b)}},processEntity:function(d,c,b){var a=c;if(d.attr("vb-entity")){return this.processBindKey(d,c,"entity")}$.each(this.entity,function(f,e){if(f===b){a=e(c)}});return a},processBindKey:function($ele,value,vbkey){var entityVal=$ele.attr("vb-"+vbkey);if(entityVal){var isternary=!!~entityVal.indexOf("?");if(isternary){return eval(entityVal)}else{}}},render:function(){var c=this;var f=this.view,e=this.data;var d,a;for(var b in e){d=f.filter(c.selector(b)).add(f.find(c.selector(b)));a=e[b];c.setElemValue(d,a,b)}this.$el.html(f)},destroyed:function(){this.$el.off();this.$el.empty()},on:function(b,a,c){this.$el.on(b,a,c)},off:function(b,a,c){this.$el.off(b,a,c)},_parseEvent:function(e){var b=this.events;if(!b){return}var a=this.on.bind(this);e=e||this;for(var d in b){(function(g){var h=c(g),f=b[g];a(h.event,h.selector,function(i){if(typeof f==="function"){f(i,this,e);return false}e[f](i,this);return false})})(d)}function c(g){var f=/(\w+)+\s+(.+)/.exec(g);return{event:f[1],selector:f[2]}}}};
​
new ViewBind({
  modelId: 'user',
  $el: '#root',
  data: {               //初始数据
    name: 'joe',
    pwd: 123,
    users: [{name: 'joe1',pwd: 1231, sex: 1}, {name: 'joe2',pwd: 1232, sex: 0}]
  },
  //u can user entity for this ViewBind or user vb-entity="value === 1 ? 'male' : 'female'"
  entity:{
    'sex': function(value){
      return value === 1 ? 'male' : 'female';
    }
  },
  events:{
    'click .user': 'setUser',
    'click .pwd': function(e, elem, that){
      that.set('pwd', 'click .pwd');
      // console.log(e, elem, that, 'this elem events');
    }
  },
  setUser: function(e, elem){
    this.set('name', 'clicksetUser');
    // console.log(e, elem, this, 'this elem events');
  }
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
CoraJoepro
0viewers