CODEWITHSUNDEEP
javascriptbackbone.js
rybosome
rybosome

Reputation: 5126

Why is this Backbone view not initializing?

I'm attempting to create a simple backbone view that attaches to an <li> element. This element contains a <span> with some text, two <input> text boxes, and a <button>. When clicked, the visibility of the <span> and the <input> boxes should switch. That is, one should always be visible, and one should always be invisible. I've written a small demo with the complete html and JS code. Can anyone see what I might be doing wrong?

<!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>

Upvotes: 0

Views: 2014

Answers (3)

HackaZach
HackaZach

Reputation: 409

Doesn't appear that a documentonReady() function is called.

I wrapped the Backbone code within a $(function(){ .. }); and it loads up correctly.

The problem could be with the (function($){ ... })(jQuery) construct and the included version of jQuery. (as mentioned above.)

Upvotes: 1

Rob Hruska
Rob Hruska

Reputation: 120286

I'd go out on a limb and say your DOM's not ready before var filter = new FilterView(); gets called. It doesn't look like you're executing it within any sort of "ready" event handler.

Try moving your <script> to the end of the <body>.

Upvotes: 1

SpoBo
SpoBo

Reputation: 2158

Try using a more recent version of jQuery. http://jsfiddle.net/SpoBo/cHSgb/3/ <- your jQuery version. doesn't work. http://jsfiddle.net/SpoBo/cHSgb <- jQuery 1.7.1 works.

Upvotes: 0

Related Questions