如何在淘汰賽中做一個簡單的模板數據綁定？

我是一個淘汰賽的新手，我試圖找出一個來自plurasight的練習，它綁定一個javascript數組並在網頁中顯示爲一個網格。只是無法弄清楚我做了什麼錯誤，因爲我做了什麼視頻。以下是我的代碼：請任何人都可以幫我一把嗎？如何在淘汰賽中做一個簡單的模板數據綁定？

<div id="tagsList"> 
    <div> 
     <h2>Tags</h2> 

    </div> 
    <div> 
     <input type="text" placeholder="Add New Tag" /> 
     <button>+ Add</button> 
     <ul data-bind="template: {name: 'tagsTempl', foreach: tags}"></ul> 
    </div> 
</div> 
<script id="tagsTempl" type="text/html"> 
    <li> <span> $ { 
     Name 
    } 
    $ { 
     (new Date).toLocaleTimeString() 
    } < /span> 
      <div> 
       <a href="#" >Edit</a > < a href = "#" > Delete < /a> 
      </div > < /li> 
</script> 

$(function() { 


    var data = [{ 
     Id: 1, 
     Name: "Ball Handling" 
    }, { 
     Id: 2, 
     Name: "Passing" 
    }, { 
     Id: 3, 
     Name: "Shooting" 
    }, { 
     Id: 4, 
     Name: "Rebounding" 
    }, { 
     Id: 5, 
     Name: "Transition" 
    }, { 
     Id: 6, 
     Name: "Defense" 
    }, { 
     Id: 7, 
     Name: "Team Offense" 
    }, { 
     Id: 8, 
     Name: "Team Defense" 
    }]; 

    var viewModel = { 
     //data 
     tags: ko.observableArray(data), 
     tagToAdd: ko.observable(""), 

     //behaviours 
     addTag: function() { 
      this.tags.push({ 
       Name: this.tagToAdd() 
      }); 
      this.addTag(""); 
     } 
    }; 

    ko.applyBindings(viewModel); 

});

我的代碼是http://jsfiddle.net/hanxuema/NTYLD/以及

感謝

更新

這是當然的頁面 enter image description here