爲什麼這個Backbone視圖不能初始化？

我正在嘗試創建一個簡單的骨幹視圖，該視圖附着到<li>元素。該元素包含帶有一些文本的<span>，兩個<input>文本框和<button>。單擊時，應切換<span>和<input>框的可見性。也就是說，一個人應該永遠是可見的，一個人應該永遠是看不見的。我用完整的html和JS代碼編寫了一個小演示。任何人都可以看到我可能做錯了什麼？爲什麼這個Backbone視圖不能初始化？

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
     <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script> 
     <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script> 
     <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> 

     <script type="text/javascript"> 
      (function($){ 
       var FilterView = Backbone.View.extend({ 

        el: $('li.filter.filterdate'), 

        events: { 
         'click button#filter-cal': 'toggleFilter' 
        }, 

        initialize: function() { 
         _.bindAll(this, 'render', 'toggleFilter'); 

         this.filtersOn = false; 
         this.render(); 
        }, 

        render: function() { 
         if (this.filtersOn) { 
          $(this.el).children('span').hide(); 
          $(this.el).children('input').show(); 
         } else { 
          $(this.el).children('span').show(); 
          $(this.el).children('input').hide(); 
         } 
        }, 

        toggleFilter: function() { 
         this.filtersOn = !(this.filtersOn); 
         this.render(); 
        } 

       }); 

       var filter = new FilterView(); 
      })(jQuery); 
     </script> 
    </head> 

    <body> 
     <ul> 
      <li class="filter filterdate"> 
       <span>You are filtering</span> 
       <input type="text" /> 
       <input type="text" /> 
       <button id="filter-cal">Filter</button> 
      </li> 
     </ul> 
    </body> 
</html>

來源

2012-02-21 rybosome

似乎在jsfiddle上爲我工作。 http://jsfiddle.net/SpoBo/cHSgb/ – SpoBo 2012-02-21 19:30:05