OMDB query

by amindunited

HTML

<link rel="stylesheet" href="https://rawgithub.com/ducksboard/gridster.js/master/dist/jquery.gridster.css"/>

<div id="result"></div>

<script type="text/x-handlebars" data-template-name="application">
    <header>
        <h1>Movie Search</h1>
        <div id="searchWrap">
            {{search-field}}
        </div>
    </header>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="components/search-field">
        <input id="searchField" placeholder="Movie Title" value=""/>
        <button id="submit" {{action search this}}>Search</button>
</script>
<script type="text/x-handlebars" data-template-name="search">
    Search Results
    <ul>
    {{#each movie in content}}
        <li>{{movie.Title}}</li>
    {{/each}}
    </ul>
</script>
<script type="text/x-handlebars" data-template-name="movie">
    <h2>Movie</h2>
    {{content.Title}}
    <img {{bind-attr src=content.Poster}}></img> 
    <ul>
    {{#with content}}
        <li>Actors: {{Actors}}</li>
        <li>Awards: {{Awards}}</li>
        <li>Country: {{Country}}</li>
        <li>Director: {{Director}}</li>
        <li>Genre: {{Genre}}</li>
        <li>Language: {{Language}}</li>
        <li>Metascore: {{Metascore}}</li>
        <li>Plot: {{Plot}}</li>
        <li>Poster: {{Poster}}</li>
        <li>Rated: {{Rated}}</li>
        <li>Released: {{Released}}</li>
        <li>Response: {{Response}}</li>
        <li>Runtime: {{Runtime}}</li>
        <li>Title: {{Title}}</li>
        <li>Type: {{Type}}</li>
        <li>Writer: {{Writer}}</li>
        <li>Year: {{Year}}</li>
        <li>imdbID: {{imdbID}}</li>
        <li>imdbRating: {{imdbRating}}</li>
        <li>imdbVotes: {{imdbVotes}}</li>
    {{/with}}
    </ul>
    
    
    
</script>
<script src="https://rawgithub.com/ducksboard/gridster.js/master/dist/jquery.gridster.with-extras.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script...

CSS

header h1 {
    width:50%;
    display: inline-block;
}
header #searchWrap{
    width: 45%;
    display: inline-block;
}

JavaScript

App = Em.Application.create();

App.Router.map(function(){
    //this.resource('index');
    this.route('search', {path: '/search/:searchString'});
    this.route('movie', {path: '/movie/:title'});
});
App.SearchRoute = Em.Route.extend({
    model: function(params){
        return $.ajax({
            url:'http://www.omdbapi.com/?s='+params.searchString,
            success: function(data){
                return data
            },
            error: function(e){
                console.log("Error!", e);
            }
        }).then(function(data){
            var data = $.parseJSON(data);
            return data.Search.map(function (child) {
                return child;//App.Movie.create(child);
            });
        });
    }
});
App.MovieRoute = Em.Route.extend({
    model: function(params){
        return $.ajax({
            url: 'http://www.omdbapi.com/?t='+params.title+'&tomatoes=true',
            success: function(data){
                console.log("Movie route returned", data);
                return data;
            }
        }).then(function(data){
            //console.log();
            return $.parseJSON(data);//App.Movie.create($.parseJSON(data));
        });
    }
});
App.Search = Em.Object.extend();
App.SearchController = Em.ArrayController.extend();
App.SearchView = Em.View.extend({
    didInsertElement: function(){
        console.log("did insert", this.get('controller').get('content'), this.get('content'));
    },
    click: function(e, f){
        console.log("click" , e, $(e.target).text());
        this.get('controller').transitionTo('/movie/'+$(e.target).text());
    }
});
App.Movie = Em.Object.extend();
App.MovieController = Em.Controller.extend();
App.MovieView = Em.View.extend({
    didInsertElement: function(){
        console.log("inserted movie!", this, this.get('controller').get('content'));
    }
});
App.SearchFieldComponent = Ember.Component.extend({
    actions: {
        search: function(e){
            console.log("in...