CODEWITHSUNDEEP
javascriptjqueryhtmlbackbone.js
MGA
MGA

Reputation: 531

Adding Drop down in Backbone view

I am trying to add a simple drop down ( which i am creating in my render method using jquery) in back bone view. i can see the options list (console) is getting generate, but it's not getting append to main #container div.

<html>
    <head>
        <script type="text/javascript" src="jquery-1.11.3.js"></script>
        <script type="text/javascript" src="underscore-min.js"></script>
        <script type="text/javascript" src="backbone.js"></script>      

        <script>
                var DropdownView = Backbone.View.extend({
                    el: "#container",
                    initialize: function() 
                    {
                      this.render();                        
                    },
                    render : function()
                    {
                        var data = ['volvo','mercedes','audi'];                                             
                        var options = $("<select>");                    
                        options.attr({"id" : "drpdwn"});
                        var selectOption = $('<option>').val("select").text('select');
                        options.append(selectOption);

                        _.each(data,function(val){                      
                            var option = $('<option>').val(val).text(val);
                            options.append(option);

                        })      
                        console.log(options);               
                        console.log(this.$el);
                        this.$el.html(options);
                    }
                });

                var view = new DropdownView ();
        </script>   
    </head>
    <body>
        <div id="container">

        </div>  
    </body>
</html>

Upvotes: 1

Views: 1002

Answers (1)

Akos K
Akos K

Reputation: 7133

When DropdownView is constructed #container doesn't exist in the DOM.

Move your script right after your </body>.

Since you're already using jQuery you can also wrap your script with

$(document).ready()

Upvotes: 2

Related Questions