binding_angular.html

<div ng-app>
  <div ng-controller="MyCtrl">
    <button ng-click="randomName()">Select Random Name</button>
    <div>Your name is: {{name}}</div>
  </div>
</div>
<script>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
  var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
  var initCtrl = function(){
    $scope.name = names[0];     
  }
  $scope.randomName = function() {
    $scope.name = names[Math.floor(Math.random()*names.length)];
  }
  initCtrl();
}
</script>

binding_angular.js

angular.module('myApp',[]);
function AppCtrl($scope) {
  var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
  var initCtrl = function(){
    $scope.name = names[0];     
  }
  $scope.randomName = function() {
    $scope.name = names[Math.floor(Math.random()*names.length)];
  }
  initCtrl();
}

binding_jquery.html

<button id="btn">Select Random Name</button>
<div>Your name is: <span id="name"></span></div>
<script>
var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
var setName = function(name) {
var nameElemnt = $("#name");
  nameElemnt.text(name);
}
var selectRandomName = function() {
  var randomName = names[Math.floor(Math.random()*names.length)];
  setName(randomName);
}
// Initial name and button event
var init = function(){
  setName(names[0]);
  var btn = $("#btn");
  btn.click(selectRandomName);
}
init();
</script>

binding_jquery.js

var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
var setName = function(name) {
var nameElemnt = $("#name");
  nameElemnt.text(name);
}
var selectRandomName = function() {
  var randomName = names[Math.floor(Math.random()*names.length)];
  setName(randomName);
}
// Initial name and button event
var init = function(){
  setName(names[0]);
  var btn = $("#btn");
  btn.click(selectRandomName);
}
init();

binding_native.html

<button id="btn">Select Random Name</button>
<div>Your name is: <span id="name"></span></div>
<script>
var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
var setName = function(name) {
  var nameElemnt = document.getElementById("name");
  nameElemnt.innerText = name;
}
var selectRandomName = function() {
  var randomName = names[Math.floor(Math.random()*names.length)];
  setName(randomName);
}
// Initial name and button event
var init = function(){
  setName(names[0]);
  var btn = document.getElementById("btn");
  btn.onclick = selectRandomName;
}
init();
</script>

binding_native.js

var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
var setName = function(name) {
  var nameElemnt = document.getElementById("name");
  nameElemnt.innerText = name;
}
var selectRandomName = function() {
  var randomName = names[Math.floor(Math.random()*names.length)];
  setName(randomName);
}
// Initial name and button event
var init = function(){
  setName(names[0]);
  var btn = document.getElementById("btn");
  btn.onclick = selectRandomName;
}
init();

binding_react.html

<div id="app">
</div>
<script>
// --- JSX format ---
// Name component
var Name = React.createClass({
    render: function() {
        return <div>{this.props.name}</div>
    }
});
// App component
var App = React.createClass({
 names: ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'],
    handleClick: function() {
      var randomName = this.names[Math.floor(Math.random()*this.names.length)];
    	this.setState({name: randomName});
    },
    getInitialState: function() {
    		return {name: this.names[0] }
 		},
    render: function() {
        return <div>
		      <button onClick={this.handleClick}>Select Random Name</button>
		      <Name name={this.state.name} />
               </div>;
    }
});
// Init the react root element
ReactDOM.render(
	<App />,
    document.getElementById('app')
);
</script>

binding_react.js

// Name component
var Name = React.createClass({
    render: function() {
        return <div>{this.props.name}</div>
    }
});

// App component
var App = React.createClass({
 names: ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'],
    handleClick: function() {
      var randomName = this.names[Math.floor(Math.random()*this.names.length)];
    	this.setState({name: randomName});
    },
    getInitialState: function() {
    		return {name: this.names[0] }
 		},
    render: function() {
        return <div>
        		<button onClick={this.handleClick}>Select Random Name</button>
        		<Name name={this.state.name} />
               </div>;
    }
});

// Init the react root element
ReactDOM.render(
	<App />,
    document.getElementById('app')
);

binding_underscore.html

<button id="btn">Select Random Name</button>
<script type="text/html" id='container'>
	<div>Your name is: <span id="name"><%= name %></span></div>
</script>
<div id="target"></div>
<script>
var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
// Render the template with the data
var render = function(user){
	var template = container.innerHTML;
	target.innerHTML = _.template(template, user);  
}
var selectRandomName = function() {
  	var randomName = names[Math.floor(Math.random()*names.length)];
  	render({name: randomName});
}
// Initial name and button event
var init = function(){
    var btn = document.getElementById("btn");
  	btn.onclick = selectRandomName;
  	var user = {name: names[0]}
    render(user);
}

init();
</script>

binding_underscore.js

var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
// Render the template with the data
var render = function(user){
	var template = container.innerHTML;
	target.innerHTML = _.template(template, user);  
}
var selectRandomName = function() {
  	var randomName = names[Math.floor(Math.random()*names.length)];
  	render({name: randomName});
}
// Initial name and button event
var init = function(){
    var btn = document.getElementById("btn");
  	btn.onclick = selectRandomName;
  	var user = {name: names[0]}
    render(user);
}
init();

scope_soup.html

<div ng-controller="AppCtrl">
  <button ng-click="randomName()">Select Random Name</button>
  <button ng-click="resetName()">Reset Name</button>
  <button ng-click="showAsUpperCase()">Show Name In Capital</button>
  <div>Your name is: {{name}} {{lastName}}</div>
  <div>Your name was updated {{updateCounter}} times</div>
</div>
<script>
  angular.module('myApp',[]);
function AppCtrl($scope) {
  	var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
    var lastNames = ['Harris', 'Thompson', 'Lewis'];
 		var _initialName;
    
    var initCtrl = function(){
 				$scope.name 			= names[0];
        $scope.lastName 	= lastNames[0];
        _initialName 			= $scope.name;
        _initialLastName 	= $scope.lastName;
        $scope.updateCounter = 0;
    }
    $scope.randomName = function() {
      $scope.name 		= names[Math.floor(Math.random()*names.length)];
      $scope.lastName = lastNames[Math.floor(Math.random()*lastNames.length)];
      $scope.updateCounter++;
    }
    
    // New features..
    $scope.resetName = function() {
      $scope.name 		= _initialName;
      $scope.lastName = _initialLastName;
      $scope.updateCounter++;
    }
    
    $scope.showAsUpperCase = function() {
    	$scope.name 		= $scope.name.toUpperCase();
      $scope.lastName = $scope.lastName.toUpperCase();
    }
    
    $scope.saveNameInDB = function() {
      // Update backend with new name and last name
      // ..
    }
    
    $scope.deleteNameInDb = function() {
    	// Remove name from backend
      // ..
    } 
    
    // And another 100 lines here with other features
    
    initCtrl();
}
</script>

scope_soup.js

angular.module('myApp',[]);
function AppCtrl($scope) {
  	var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
    var lastNames = ['Harris', 'Thompson', 'Lewis'];
 		var _initialName;
    var initCtrl = function(){
 				$scope.name 			= names[0];
        $scope.lastName 	= lastNames[0];
        _initialName 			= $scope.name;
        _initialLastName 	= $scope.lastName;
        $scope.updateCounter = 0;
    }
    $scope.randomName = function() {
      $scope.name 		= names[Math.floor(Math.random()*names.length)];
      $scope.lastName = lastNames[Math.floor(Math.random()*lastNames.length)];
      $scope.updateCounter++;
    }
    
    // New features..
    $scope.resetName = function() {
      $scope.name 		= _initialName;
      $scope.lastName = _initialLastName;
      $scope.updateCounter++;
    }
    
    $scope.showAsUpperCase = function() {
    	$scope.name 		= $scope.name.toUpperCase();
      $scope.lastName = $scope.lastName.toUpperCase();
    }
    
    $scope.saveNameInDB = function() {
      // Update backend with new name and last name
      // ..
    }
    
    $scope.deleteNameInDb = function() {
    	// Remove name from backend
      // ..
    } 
    
    // And another 100 lines here with other features
    
    initCtrl();
}