troygoode/collection-issue.html

## collection-issue.html
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>

    <!-- this is the DOM template for our o_O app below -->
    <div id="viewmodel">
      <ul bind="foreach: people">
        <li bind="text: name()"></li>
      </ul>
    </div>

    <!-- o_O depends on jquery or whatever else is bound to '$' -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://raw.github.com/weepy/o_O/master/o_O.js"></script>
    <script>

      var team1 = ['Hewy', 'Dewy', 'Lewy'];
      var team2 = ['Moe', 'Larry', 'Curly'];

      var ViewModel = function(){
        var self = this;
        self.people = o_O.Collection(team1.map(function(person){
          return {
            name: o_O.property(person)
          };
        }));
      };

      var viewmodel = new ViewModel();
      o_O.bind(viewmodel, '#viewmodel');

      window.setTimeout(function(){

        // WHAT DO WE DO HERE TO UPDATE THE VIEW?
        viewmodel.people = o_O.Collection(team2.map(function(person){
          return {
            name: o_O.property(person)
          };
        }));

        console.log('done');
      }, 1500);

    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Example</title>
	</head>
	<body>

	<!-- this is the DOM template for our o_O app below -->
	<div id="viewmodel">
	<ul bind="foreach: people">
	<li bind="text: name()"></li>
	</ul>
	</div>

	<!-- o_O depends on jquery or whatever else is bound to '$' -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="https://raw.github.com/weepy/o_O/master/o_O.js"></script>
	<script>

	var team1 = ['Hewy', 'Dewy', 'Lewy'];
	var team2 = ['Moe', 'Larry', 'Curly'];

	var ViewModel = function(){
	var self = this;
	self.people = o_O.Collection(team1.map(function(person){
	return {
	name: o_O.property(person)
	};
	}));
	};

	var viewmodel = new ViewModel();
	o_O.bind(viewmodel, '#viewmodel');

	window.setTimeout(function(){

	// WHAT DO WE DO HERE TO UPDATE THE VIEW?
	viewmodel.people = o_O.Collection(team2.map(function(person){
	return {
	name: o_O.property(person)
	};
	}));

	console.log('done');
	}, 1500);

	</script>

	</body>
	</html>