MVC 视图-模型，动态更新

<!DOCTYPE html>
<html>
<head>
    <title>Binding</title>
  <script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>  
  
  <script type="text/javascript" charset="utf-8">
    var User = function(name){
      this.name = name;
    };

    User.records = []

    User.bind = function(ev, callback) {
      var calls = this._callbacks || (this._callbacks = {});
      (this._callbacks[ev] || (this._callbacks[ev] = [])).push(callback);
    };

    User.trigger = function(ev) {
      var list, calls, i, l;
      if (!(calls = this._callbacks)) return this;
      if (!(list  = this._callbacks[ev])) return this;
      jQuery.each(list, function(){ this() })
    };
    
    User.create = function(name){
      this.records.push(new this(name));
      this.trigger("change")
    };

    jQuery(function($){
      User.bind("change", function(){
        var template = $("#userTmpl").tmpl(User.records);
    
        $("#users").empty();        
        $("#users").append(template);
      });
      
      User.create("First one");
      
      setTimeout(function(){
        User.create("Another one");
      }, 2000);
    });
  </script>
</head>

<body>
  <script id="userTmpl" type="text/x-jquery-tmpl">
    <li>${name}</li>
  </script>
  
  <ul id="users">
  </ul>
</body>
</html>

相关阅读:
DOM深度优先遍历算法
DOM事件
DOM修改
DOM的方法和属性
DOM简介
JSON.stringify()
JSON解析
JSON对象
JSON语法
JSON对比XML

原文地址：https://www.cnblogs.com/human/p/3480433.html