anchor.diff:  		})();
   		
   		var recipesViewModel = new Vue({
  -			el: '#recipes',
  +			el: '#list',
   			data: { 
   				recipes: {} 
   			},
  -			beforeUpdated: function() {
  -				$( "#recipes" ).fadeOut( "fast" );
  +			beforeUpdate: function() {
  +				$( "#recipes" ).hide();
   			},
   			updated: function() {
  -				$( "#recipes" ).fadeIn( "fast" );
  +				$( "#recipes" ).fadeIn( "slow" );
   			},
   			methods: {
   				selectRecipe: function( recipe ) {
  
positive.code: 		
  		var recipes = (function() {
  			var url = $recipesUrl;
  			var pageSize = 10;
  			var pageNo = 0;
  			var showRecipeCallback;
  					
  			var load = function() {
  				var deferred = $.Deferred();
  				var completeUrl = url + "?sort=title&page=" + pageNo + "&size=" + pageSize;
  				$.getJSON( completeUrl )
  
negative.code: 			<ul class="w3-ul w3-hoverable w3-large" id="list">
  				<li v-for="recipe in recipes"><a href="#" v-on:click="selectRecipe(recipe)">{{ recipe.title }}</a></li>
  			</ul>
  			<div class="w3-bar w3-center" id="paging">
  				<a v-on:click="prevPage" class="w3-button w3-xxlarge" title="previous">&laquo;</a>
  				<a v-on:click="nextPage" class="w3-button w3-xxlarge" title="next">&raquo;</a>
  			</div>
  		</div>
  	</div>
  