singuerinc/SearchView.js

## app.js
define(
  [
    'marionette',
    'backbone',
    'facebook',
    'UserView',
    'SearchView',
    'UserModel'
  ],

  function (Marionette, Backbone, FB, UserView, SearchView, UserModel) {

    var app = new Marionette.Application();

    app.addRegions({
      search: '#search',
      result: '#result'
    });

    app.addInitializer(function () {

      var user,
          searchBox,
          resultView;

      //Create a model that store the current Facebook's user
      user = new UserModel();

      // Create two views to get the input from the user
      // and other to display the info fetched from Facebook.
      resultView = new UserView({ model: user });
      searchBox = new SearchView({ model: user });

      // Listen to the event "search:value:changed".
      // Every time this event is dispatched the
      // app fetch data from Facebook.
      searchBox.on('search:value:changed', function(value) {

        FB.api('/' + value, {fields: 'id,link,name,username,picture'}, function(result){
          // When the response arrives
          // the model is updated with new data.
          if(!!result && !result.error){
            user.set(result);
          } else {
            user.clear({silent: true}).set(user.defaults);
          }
        });

      });

      app.search.show(searchBox);
      app.result.show(resultView);

    });

    return app;

  });

## index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Facebook User Finder</title>
    <link href='http://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="fb-root"></div>

    <div id="search"></div>
    <div id="result">
        <!-- here will be the compiled template with
        the user data fetched from Facebook -->
    </div>

    <script id="user-finder-tpl" type="text/template">

        <ul>
            <li><img class="picture" src="<%= picture.data.url %>" alt="<%= name %>"/></li>
            <li><span>id:</span> <a href="https://www.facebook.com/<%= id %>" target="_blank"><%= id %></a></li>
            <li><span>username:</span> <%= username %></li>
            <li><span>name:</span> <%= name %></li>
            <li><span>link:</span> <a href="<%= link %>" target="_blank"><%= link %></a></li>
        </ul>

    </script>

    <script id="search-box-tpl" type="text/template">
        <input type="text" id="search-box-input" name="search-box-input" placeholder="facebook id..." />
    </script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js" data-main="js/main"></script>
</body>
</html>

## main.js
require.config({

  baseUrl: 'js',

  paths: {
    'backbone':     '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min',
    'underscore':   '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
    'jquery':       '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min',
    'marionette':   '//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.0.3/backbone.marionette.min',
    'facebook':     '//connect.facebook.net/en_US/all'
  },

  shim: {
    'jquery': {
      'exports': 'jQuery'
    },
    'underscore': {
      'exports': '_'
    },
    'backbone': {
      'deps': ['jquery', 'underscore'],
      'exports': 'Backbone'
    },
    'marionette': {
      'deps': ['backbone'],
      'exports': 'Marionette'
    },
    'facebook' : {
      'exports': 'FB'
    }
  }
});

require(['app'], function(app) {

  app.start();

});

## SearchView.js
define(['marionette'], function (Marionette) {

  return Marionette.ItemView.extend({

    id: 'search-box',
    tagName: 'div',
    template: '#search-box-tpl',

    ui: {
      input: '#search-box-input'
    },

    events: {
      'keyup @ui.input': '_onInputChanged'
    },

    modelEvents: {
      'change': '_onModelChanged'
    },

    _onModelChanged: function (model) {
      var exist = model.get('id') !== '';
      this.$el.toggleClass('valid', exist);
    },

    _onInputChanged: function(e){
      this.trigger('search:value:changed', e.target.value);
    }

  });
});

## UserModel.js
define(['backbone'], function (Backbone) {

  return Backbone.Model.extend({
    defaults: {
      id: "",
      link: "",
      name: "",
      username: "",
      picture: {
        data: {
          url: ""
        }
      }
    }
  });
});

## UserView.js
define(['marionette'], function (Marionette) {

  return Marionette.ItemView.extend({

    id: 'user-finder',
    tagName: 'div',
    template: '#user-finder-tpl',

    modelEvents: {
      'change': '_onModelChanged'
    },

    _onModelChanged: function () {
      this.render();
    }

  });
});
	define(
	[
	'marionette',
	'backbone',
	'facebook',
	'UserView',
	'SearchView',
	'UserModel'
	],

	function (Marionette, Backbone, FB, UserView, SearchView, UserModel) {

	var app = new Marionette.Application();

	app.addRegions({
	search: '#search',
	result: '#result'
	});

	app.addInitializer(function () {

	var user,
	searchBox,
	resultView;

	//Create a model that store the current Facebook's user
	user = new UserModel();

	// Create two views to get the input from the user
	// and other to display the info fetched from Facebook.
	resultView = new UserView({ model: user });
	searchBox = new SearchView({ model: user });

	// Listen to the event "search:value:changed".
	// Every time this event is dispatched the
	// app fetch data from Facebook.
	searchBox.on('search:value:changed', function(value) {

	FB.api('/' + value, {fields: 'id,link,name,username,picture'}, function(result){
	// When the response arrives
	// the model is updated with new data.
	if(!!result && !result.error){
	user.set(result);
	} else {
	user.clear({silent: true}).set(user.defaults);
	}
	});

	});

	app.search.show(searchBox);
	app.result.show(resultView);

	});

	return app;

	});
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Facebook User Finder</title>
	<link href='http://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>

	<div id="fb-root"></div>

	<div id="search"></div>
	<div id="result">
	<!-- here will be the compiled template with
	the user data fetched from Facebook -->
	</div>

	<script id="user-finder-tpl" type="text/template">

	<ul>
	<li><img class="picture" src="<%= picture.data.url %>" alt="<%= name %>"/></li>
	<li><span>id:</span> <a href="https://www.facebook.com/<%= id %>" target="_blank"><%= id %></a></li>
	<li><span>username:</span> <%= username %></li>
	<li><span>name:</span> <%= name %></li>
	<li><span>link:</span> <a href="<%= link %>" target="_blank"><%= link %></a></li>
	</ul>

	</script>

	<script id="search-box-tpl" type="text/template">
	<input type="text" id="search-box-input" name="search-box-input" placeholder="facebook id..." />
	</script>

	<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js" data-main="js/main"></script>
	</body>
	</html>
	require.config({

	baseUrl: 'js',

	paths: {
	'backbone': '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min',
	'underscore': '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
	'jquery': '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min',
	'marionette': '//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.0.3/backbone.marionette.min',
	'facebook': '//connect.facebook.net/en_US/all'
	},

	shim: {
	'jquery': {
	'exports': 'jQuery'
	},
	'underscore': {
	'exports': '_'
	},
	'backbone': {
	'deps': ['jquery', 'underscore'],
	'exports': 'Backbone'
	},
	'marionette': {
	'deps': ['backbone'],
	'exports': 'Marionette'
	},
	'facebook' : {
	'exports': 'FB'
	}
	}
	});

	require(['app'], function(app) {

	app.start();

	});
	define(['marionette'], function (Marionette) {

	return Marionette.ItemView.extend({

	id: 'search-box',
	tagName: 'div',
	template: '#search-box-tpl',

	ui: {
	input: '#search-box-input'
	},

	events: {
	'keyup @ui.input': '_onInputChanged'
	},

	modelEvents: {
	'change': '_onModelChanged'
	},

	_onModelChanged: function (model) {
	var exist = model.get('id') !== '';
	this.$el.toggleClass('valid', exist);
	},

	_onInputChanged: function(e){
	this.trigger('search:value:changed', e.target.value);
	}

	});
	});
	define(['backbone'], function (Backbone) {

	return Backbone.Model.extend({
	defaults: {
	id: "",
	link: "",
	name: "",
	username: "",
	picture: {
	data: {
	url: ""
	}
	}
	}
	});
	});
	define(['marionette'], function (Marionette) {

	return Marionette.ItemView.extend({

	id: 'user-finder',
	tagName: 'div',
	template: '#user-finder-tpl',

	modelEvents: {
	'change': '_onModelChanged'
	},

	_onModelChanged: function () {
	this.render();
	}

	});
	});