我正在尝试创建一个附加到 <li> 的简单主干 View 。元素。该元素包含 <span>有一些文字，两个 <input>文本框，以及 <button> 。单击时， <span> 的可见性和 <input>盒子应该切换。也就是说，一个人应该总是可见的，一个人应该总是不可见的。我用完整的 html 和 JS 代码编写了一个小演示。谁能看到我可能做错了什么？
<!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>
最佳答案
似乎没有调用 documentonReady() 函数。
我将 Backbone 代码包装在 $(function(){ .. }); 中并且它加载正确。
问题可能出在 (function($){ ... })(jQuery) 构造和包含的 jQuery 版本上。 (如上所述。)
关于javascript - 为什么这个 Backbone View 没有初始化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9383443/