elijahmanor/channels.js

## channels.js
define( [ "postal" ], function( postal ) {
        return {
            bus: postal.channel({ channel: "main" })
        };
    });

## index.html
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="navbar">
        <div class="navbar-inner"> <a class="brand" href="#">Netflix</a></div>
    </div>
    <form id="search">
        <label>Movie Search Term</label>
        <input type="text" placeholder="Type movie…">
        <span class="help-block">Example: <a class="term" href="#">Star Wars</a></span>
        <button type="submit" class="btn">Search</button>
    </form>
    <table id="output" class="table table-striped table-condensed" hidden="">
        <caption>Search Results</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Rating</th>
                <th>Released</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script data-main="main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js"></script>
</body>
</html>

## jquery-worms.js
$( document ).on( "click", ".term", function( e ) {
    e.preventDefault();
    $( "input" ).val( $( this ).text() );
    $( "button" ).trigger( "click" );
});

$( document ).ready( function() {
    $( "button" ).on( "click", function( e ) {
        var searchTerm = $( "input" ).val();
        var url = "http://odata.netflix.com/Catalog/Titles?$filter=substringof('" +
                escape( searchTerm ) + "',Name)&$callback=callback&$format=json";

        $( ".help-block" ).html( function( index, html ) {
            return e.originalEvent ? html + ", " + "<a href='#' class='term'>" +
                searchTerm + "</a>" : html;
        });

        $.ajax({
            dataType: "jsonp",
            url: url,
            jsonpCallback: "callback",
            success: function( data ) {
                var rows = [];
                $.each( data.d.results, function( index, result ) {
                    var row = "";
                    if ( result.Rating && result.ReleaseYear ) {
                        row += "<td>" + result.Name + "</td>";
                        row += "<td>" + result.Rating + "</td>";
                        row += "<td>" + result.ReleaseYear + "</td>";
                        row = "<tr>" + row + "</tr>";
                        rows.push( row );
                    }
                });
                $( "table" ).show().find( "tbody" ).html( rows.join( "" ) );
            }
        });
        e.preventDefault();
    });
});

## main.js
require.config({
    paths: {
        jquery: "https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min",
        underscore: "http://underscorejs.org/underscore",
        backbone: "http://backbonejs.org/backbone",
        postal: "http://cdnjs.cloudflare.com/ajax/libs/postal.js/0.8.2/postal.min",
        bootstrap: "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/js/bootstrap.min"
    },
    shim: {
        underscore: {
            exports: "_"
        },
        backbone: {
            deps: [ "jquery", "underscore" ],
            exports: "Backbone"
        },
        bootstrap: {
            "deps" : [ "jquery" ]
        }
    }
});

require( [ "jquery", "search-view", "search", "movie-view", "movies" ],
    function( $, SearchView, Search, MovieView, Movies ) {
        $( document ).ready( function() {
            var searchView = new SearchView({
                el: $( "#search" ),
                model: new Search()
            });

            var movieView = new MovieView({
                el: $( "#output" ),
                collection: new Movies()
            });
        });
    });

## movie-template.html
<% _.each( movies, function( movie ) { %>
    <tr>
        <td><%= movie.name %></td>
        <td><%= movie.rating %></td>
        <td><%= movie.releaseYear %></td>
    </tr>
<% }); %>

## movie-view.js
define( [ "jquery", "backbone", "underscore", "channels", "text!movie-template.html" ],
    function( $, Backbone, _, channels, template ) {
        var View = Backbone.View.extend({
            template: _.template( template ),
            initialize: function() {
                var that = this;

                _.bindAll( this, "render" );
                channels.bus.subscribe( "search.term.changed", function( data ) {
                    that.collection.term = data.term;
                    that.collection.fetch({
                        success: that.render
                    });
                });
            },
            render: function() {
                var html = this.template({ movies: this.collection.toJSON() });
                this.$el.show().find( "tbody" ).html( html );
            }
        });

        return View;
    });

## movie.js
define( [ "backbone" ], function( Backbone ) {
    var Model = Backbone.Model.extend({
        defaults: { term: "" },
        parse: function( data, xhr ) {
            return {
                releaseYear: data.ReleaseYear,
                rating: data.Rating,
                name: data.Name
            };
        }
    });

    return Model;
});

## movies.js
define( [ "backbone", "movie" ], function( Backbone, Movie ) {
    var Collection = Backbone.Collection.extend({
        model: Movie,
        url: function() {
            return "http://odata.netflix.com/Catalog/Titles?$filter=substringof('" +
                escape( this.term ) + "',Name)&$callback=callback&$format=json";
        },
        parse : function( data, xhr ) {
            return data.d.results;
        },
        sync: function( method, model, options ) {
            options.dataType = "jsonp";
            options.jsonpCallback = "callback";

            return Backbone.sync( method, model, options );
        }
    });

    return Collection;
});

## search-view.js
define( [ "jquery", "backbone", "underscore", "channels" ],
    function( $, Backbone ) {

        var View = Backbone.View.extend({
            events: {
                "click button": "searchByInput",
                "click .term": "searchByHistory"
            },
            initialize: function() {
                this.model.on( "change", this.updateHistory, this );
                this.model.on( "change", this.updateInput, this );
            },
            searchByInput: function( e ) {
                e.preventDefault();

                this.model.set( "term", this.$( "input" ).val() );
            },
            searchByHistory: function( e ) {
                var text = $( e.target ).text();

                this.model.set( "term", text );
            },
            updateHistory: function() {
                var that = this;

                this.$el.find( ".help-block" ).html( function(index, html) {
                    var term = that.model.get( "term" );

                    return ~html.indexOf( term ) ? html :
                        html + ", " + "<a href='#' class='term'>" + term + "</a>";
                });
            },
            updateInput: function() {
                this.$el.find( "input" ).val( this.model.get("term") );
            }
        });

        return View;
    });

## search.js
define( [ "backbone", "channels" ], function( Backbone, channels ) {
    var Model = Backbone.Model.extend({
        initialize: function() {
            this.on( "change:term", function( model, value ) {
                channels.bus.publish( "search.term.changed", { term: value } );
            });
        }
    });

    return Model;
});
	define( [ "postal" ], function( postal ) {
	return {
	bus: postal.channel({ channel: "main" })
	};
	});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="navbar">
	<div class="navbar-inner"> <a class="brand" href="#">Netflix</a></div>
	</div>
	<form id="search">
	<label>Movie Search Term</label>
	<input type="text" placeholder="Type movie…">
	<span class="help-block">Example: <a class="term" href="#">Star Wars</a></span>
	<button type="submit" class="btn">Search</button>
	</form>
	<table id="output" class="table table-striped table-condensed" hidden="">
	<caption>Search Results</caption>
	<thead>
	<tr>
	<th>Name</th>
	<th>Rating</th>
	<th>Released</th>
	</tr>
	</thead>
	<tbody></tbody>
	</table>
	<script data-main="main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js"></script>
	</body>
	</html>
	$( document ).on( "click", ".term", function( e ) {
	e.preventDefault();
	$( "input" ).val( $( this ).text() );
	$( "button" ).trigger( "click" );
	});

	$( document ).ready( function() {
	$( "button" ).on( "click", function( e ) {
	var searchTerm = $( "input" ).val();
	var url = "http://odata.netflix.com/Catalog/Titles?$filter=substringof('" +
	escape( searchTerm ) + "',Name)&$callback=callback&$format=json";

	$( ".help-block" ).html( function( index, html ) {
	return e.originalEvent ? html + ", " + "<a href='#' class='term'>" +
	searchTerm + "</a>" : html;
	});

	$.ajax({
	dataType: "jsonp",
	url: url,
	jsonpCallback: "callback",
	success: function( data ) {
	var rows = [];
	$.each( data.d.results, function( index, result ) {
	var row = "";
	if ( result.Rating && result.ReleaseYear ) {
	row += "<td>" + result.Name + "</td>";
	row += "<td>" + result.Rating + "</td>";
	row += "<td>" + result.ReleaseYear + "</td>";
	row = "<tr>" + row + "</tr>";
	rows.push( row );
	}
	});
	$( "table" ).show().find( "tbody" ).html( rows.join( "" ) );
	}
	});
	e.preventDefault();
	});
	});
	require.config({
	paths: {
	jquery: "https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min",
	underscore: "http://underscorejs.org/underscore",
	backbone: "http://backbonejs.org/backbone",
	postal: "http://cdnjs.cloudflare.com/ajax/libs/postal.js/0.8.2/postal.min",
	bootstrap: "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/js/bootstrap.min"
	},
	shim: {
	underscore: {
	exports: "_"
	},
	backbone: {
	deps: [ "jquery", "underscore" ],
	exports: "Backbone"
	},
	bootstrap: {
	"deps" : [ "jquery" ]
	}
	}
	});

	require( [ "jquery", "search-view", "search", "movie-view", "movies" ],
	function( $, SearchView, Search, MovieView, Movies ) {
	$( document ).ready( function() {
	var searchView = new SearchView({
	el: $( "#search" ),
	model: new Search()
	});

	var movieView = new MovieView({
	el: $( "#output" ),
	collection: new Movies()
	});
	});
	});
	<% _.each( movies, function( movie ) { %>
	<tr>
	<td><%= movie.name %></td>
	<td><%= movie.rating %></td>
	<td><%= movie.releaseYear %></td>
	</tr>
	<% }); %>
	define( [ "jquery", "backbone", "underscore", "channels", "text!movie-template.html" ],
	function( $, Backbone, _, channels, template ) {
	var View = Backbone.View.extend({
	template: _.template( template ),
	initialize: function() {
	var that = this;

	_.bindAll( this, "render" );
	channels.bus.subscribe( "search.term.changed", function( data ) {
	that.collection.term = data.term;
	that.collection.fetch({
	success: that.render
	});
	});
	},
	render: function() {
	var html = this.template({ movies: this.collection.toJSON() });
	this.$el.show().find( "tbody" ).html( html );
	}
	});

	return View;
	});
	define( [ "backbone" ], function( Backbone ) {
	var Model = Backbone.Model.extend({
	defaults: { term: "" },
	parse: function( data, xhr ) {
	return {
	releaseYear: data.ReleaseYear,
	rating: data.Rating,
	name: data.Name
	};
	}
	});

	return Model;
	});
	define( [ "backbone", "movie" ], function( Backbone, Movie ) {
	var Collection = Backbone.Collection.extend({
	model: Movie,
	url: function() {
	return "http://odata.netflix.com/Catalog/Titles?$filter=substringof('" +
	escape( this.term ) + "',Name)&$callback=callback&$format=json";
	},
	parse : function( data, xhr ) {
	return data.d.results;
	},
	sync: function( method, model, options ) {
	options.dataType = "jsonp";
	options.jsonpCallback = "callback";

	return Backbone.sync( method, model, options );
	}
	});

	return Collection;
	});
	define( [ "jquery", "backbone", "underscore", "channels" ],
	function( $, Backbone ) {

	var View = Backbone.View.extend({
	events: {
	"click button": "searchByInput",
	"click .term": "searchByHistory"
	},
	initialize: function() {
	this.model.on( "change", this.updateHistory, this );
	this.model.on( "change", this.updateInput, this );
	},
	searchByInput: function( e ) {
	e.preventDefault();

	this.model.set( "term", this.$( "input" ).val() );
	},
	searchByHistory: function( e ) {
	var text = $( e.target ).text();

	this.model.set( "term", text );
	},
	updateHistory: function() {
	var that = this;

	this.$el.find( ".help-block" ).html( function(index, html) {
	var term = that.model.get( "term" );

	return ~html.indexOf( term ) ? html :
	html + ", " + "<a href='#' class='term'>" + term + "</a>";
	});
	},
	updateInput: function() {
	this.$el.find( "input" ).val( this.model.get("term") );
	}
	});

	return View;
	});
	define( [ "backbone", "channels" ], function( Backbone, channels ) {
	var Model = Backbone.Model.extend({
	initialize: function() {
	this.on( "change:term", function( model, value ) {
	channels.bus.publish( "search.term.changed", { term: value } );
	});
	}
	});

	return Model;
	});