Basic View Backbone

by Alee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>
<script type="text/template" id="search_template">
  <label>Search</label>
  <input type="text" id="search_input" />
  <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>
<div id="result_container"></div>

JavaScript

var SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      var template = _.template( $("#search_template").html(), {} );
      this.$el.html( template );
    },
    events: {
      "click input[type=button]": "doSearch"
    },
    doSearch: function( event ){
      console.log( "Search for " + $("#search_input").val() );
      query = $('#search_input').val();
      console.log(query);
      
      var myCollection = new MoviesCollection();
      myCollection.setQuery(query);

      myCollection.fetch().done(function(){
          alert('fetch complete : '+myCollection.length);
          $("#result_container").html(JSON.stringify(myCollection.toJSON()));
      });      
    }
  });
  
  var MoviesCollection = Backbone.Collection.extend({
    url:function(){
        //return "http://api.themoviedb.org/3/search/movie?api_key=a8f7039633f2065942cd8a28d7cadad4&query="+this.query;
        //return "https://api.github.com/search/repositories?q=language:" + this.query + "&sort=stars&order=desc";
        return "https://www.googleapis.com/customsearch/v1?key=AIzaSyBD8Zwrim3nlXQSvJpEGv6jqxV8ICW1aOE&cx=018363150864433754823:atuffqurojo&q="+this.query+"&searchType=image&start=11&num=10"
    },
    parse:function(response){
        return response.items;
    },
    setQuery:function(query){
        this.query=encodeURIComponent(query);
    }
});

  var search_view = new SearchView({ el: $("#search_container") });