Javascript 为什么这个主干视图没有初始化？_Javascript_Backbone.js

Javascript 为什么这个主干视图没有初始化？

javascript backbone.js

Javascript 为什么这个主干视图没有初始化？,javascript,backbone.js,Javascript,Backbone.js,我试图创建一个简单的主干视图，该视图连接到元素。此元素包含一个带有一些文本的、两个文本框和一个。单击时，应切换和框的可见性。也就是说，一个人应该总是可见的，一个人应该总是不可见的。我已经用完整的html和JS代码编写了一个小演示。有人能看出我可能做错了什么吗 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery

我试图创建一个简单的主干视图，该视图连接到

元素。此元素包含一个带有一些文本的

、两个

文本框和一个

。单击时，应切换

和

框的可见性。也就是说，一个人应该总是可见的，一个人应该总是不可见的。我已经用完整的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>


（函数（$）{
var FilterView=Backbone.View.extend({
el:$（'li.filter.filterdate'），
活动：{
'单击按钮#过滤器校准'：'切换过滤器'
},
初始化：函数（）{
_.bindAll（这是“呈现”、“切换过滤器”）；
this.filtersOn=false；
这个。render（）；
},
render:function（）{
如果（这个过滤器）{
$（this.el）.children（'span'）.hide（）；
$（this.el）.children（'input'）.show（）；
}否则{
$（this.el）.children（'span'）.show（）；
$（this.el）.children（'input'）.hide（）；
}
},
toggleFilter:函数（）{
this.filtersOn=！（this.filtersOn）；
这个。render（）；
}
});
var filter=new FilterView（）；
})（jQuery）；


你在过滤
滤器

尝试使用较新版本的jQuery。

在

var-filter=new-FilterView（）之前，我会冒险说您的DOM还没有准备好被调用。它看起来不像是在任何类型的“就绪”事件处理程序中执行它
尝试将
移动到
的末尾，因为似乎没有调用documentonReady（）函数
我将主干代码包装在$（function（）{..}）中；而且它装载正确
问题可能出在（function（$）{…}）（jQuery）构造和包含的jQuery版本上。（如上所述。）
似乎在JSFIDLE上为我工作。FWIW，主干文档，它只需要jQuery>1.4.2。我明白了：）那么它可能就是准备好文档的版本了。最好是从根本上解决问题。