JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script id="userTmpl" type="text/x-jquery-tmpl">
    <li>${name}</li>
</script>
<h1>繫結機制 - Binding</h1>
<ul id="users">
</ul>

<input type="text" id="AddUser"/>

JavaScript

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("請在下方輸入框輸入任意文字");
    
    $("#AddUser").on("change", function(){
        User.create(this.value);
        $(this).val("")
    });
});