title: Binding a dropdown using Backbone.js
body: <p>I have just started a POC on backbone.js and facing a basic problem.I am populating a dropdown list using a collection.
  But the dropdwon is not getting populated with the static values defined in the collection.</p>
  
  <p>Can you please help me out on this.</p>
  
  <pre><code>      $(function () {
        var Country = Backbone.Model.extend();
        var Countries = Backbone.Collection.extend({
            model: Country
  
        });
  
        var CountryView = Backbone.View.extend({
            tagName: "option",
  
            initialize: function () {
                _.bindAll(this, 'render');
            },
            render: function () {
                $(this.el).attr('value',
      this.model.get('id')).html(this.model.get('name'));
                return this;
            }
        });
  
        var CountriesView = Backbone.View.extend({
            initialize: function () {
                _.bindAll(this, 'addOne', 'addAll');
                this.collection.bind('reset', this.addAll);
            },
            addOne: function (country) {
                $(this.el).append(
      new CountryView({ model: country }).render().el);
            },
            addAll: function () {
                this.collection.each(this.addOne);
            }
        });
  
        var countries = new Countries([{
            id: 'US',
            name: 'US'
        },
            {
                id: 'India',
                name: 'India'
            },
            {
                id: 'UK',
                name: 'UK'
            }]);
        var countriesview = new CountriesView({ el: $("#country"), collection: countries });
        //countries.fetch();
    });
  </code></pre>