At an event in my view, when a key is pressed and released, it triggers a fetch request to the TMDB API.
class Movieseat.Views.Moviesearch extends Backbone.View
template: JST['movieseats/moviesearch']
el: '#moviesearch'
initialize: (opts) ->
@collection.on('reset', @render, this)
{@collection} = opts
@render()
return
render: ->
$(@el).html(@template(collection: @collection))
return
events:
"keyup input": "doSearch"
doSearch: (e) ->
@collection.setQuery $(e.currentTarget).val()
@collection.fetch()
view = new Movieseat.Views.Movie()
$('#movies').append(view.render().el)
This represents my collection:
class Movieseat.Collections.Moviesearch extends Backbone.Collection
url: -> "http://api.themoviedb.org/3/search/movie?api_key=a8f7039633f2065942cd8a28d7cadad4&query=#{@query}"
setQuery: (q) ->
@query = q
return
For example, if the user inputs inception, this is the corresponding fetch request:
http://api.themoviedb.org/3/search/movie?api_key=a8f7039633f2065942cd8a28d7cadad4&query=inception
In my view, I append a template called movies. The goal is to display all the original_title data retrieved from the fetch request within that template and keep it updated as needed.