为什么这个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