0
私は<li>要素に接続する単純なバックボーン・ビューを作成しようとしています。この要素には、テキストを含む<span>と、2つの<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>
私はjsfiddleで働いているようです。 http://jsfiddle.net/SpoBo/cHSgb/ – SpoBo