Question

我正在尝试创建一个附加到<li>元素的简单骨干视图。此元素包含<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>

Answer 1

我会在var filter = new FilterView();被叫之前说你的DOM没有准备就绪。看起来你并没有在任何类型的准备好的情况下执行它。事件处理程序。

尝试将<script>移至<body>的末尾。

Answer 2

似乎没有调用documentonReady（）函数。

我将Backbone代码包装在$（function（）{..}）中;它正确加载。

问题可能在于（function（$）{...}）（jQuery）构造和jQuery的包含版本。（如上所述。）

Answer 3

尝试使用更新版本的jQuery。 http://jsfiddle.net/SpoBo/cHSgb/3/＆lt; - 您的jQuery版本。不起作用。 http://jsfiddle.net/SpoBo/cHSgb＆lt; - jQuery 1.7.1可以工作。

为什么这个Backbone视图没有初始化？

3 个答案: