View model docs cleanup

component/component.js

@@ -235,6 +235,7 @@ steal("can/util", "can/view/callbacks","can/control", "can/observe", "can/view/m
 				// Set `componentScope` to `this.viewModel` and set it to the element's `data` object as a `viewModel` property
 				this.scope = this.viewModel = componentScope;
 				can.data(can.$(el), "scope", this.scope);
+				can.data(can.$(el), "viewModel", this.scope);
 
 				// Create a real Scope object out of the viewModel property
 				var renderedScope = lexicalContent ?
@@ -482,24 +483,7 @@ steal("can/util", "can/view/callbacks","can/control", "can/observe", "can/view/m
 	 */
 		// Define the `can.viewModel` function that can be used to retrieve the
 		// `viewModel` from the element
-	can.scope = can.viewModel = function (el, attr, val) {
-		el = can.$(el);
-		var scope = can.data(el, "scope");
-		if(!scope) {
-			scope = new can.Map();
-			can.data(el, "scope", scope);
-		}
-		switch (arguments.length) {
-			case 0:
-			case 1:
-				return scope;
-			case 2:
-				return scope.attr(attr);
-			default:
-				scope.attr(attr, val);
-				return el;
-		}
-	};
+
 
 	var $ = can.$;
 

component/component_test.js

@@ -60,7 +60,7 @@ steal("can/component", "can/view/stache" ,"can/route", "steal-qunit", function (
 				"{{/panels}}" +
 				"</ul>" +
 				"<content></content>",
-			scope: {
+			viewModel: {
 				panels: [],
 				addPanel: function (panel) {
 
@@ -104,21 +104,21 @@ steal("can/component", "can/view/stache" ,"can/route", "steal-qunit", function (
 			// make sure <content/> works
 			template: "{{#if active}}<content></content>{{/if}}",
 			tag: "panel",
-			scope: {
+			viewModel: {
 				active: false,
 				title: "@"
 			},
 			events: {
 				" inserted": function () {
-					can.scope(this.element[0].parentNode)
-						.addPanel(this.scope);
+					can.viewModel(this.element[0].parentNode)
+						.addPanel(this.viewModel);
 				},
 				" removed": function () {
-					if (!can.scope(this.element[0].parentNode)) {
+					if (!can.viewModel(this.element[0].parentNode)) {
 						console.log("bruke");
 					}
-					can.scope(this.element[0].parentNode)
-						.removePanel(this.scope);
+					can.viewModel(this.element[0].parentNode)
+						.removePanel(this.viewModel);
 				}
 			}
 		});
@@ -678,13 +678,13 @@ steal("can/component", "can/view/stache" ,"can/route", "steal-qunit", function (
 		can.append(can.$("#qunit-fixture"),
 				   can.view.mustache("<my-taggy-tag id='x'></my-taggy-tag>")());
 		var el = can.$("my-taggy-tag");
-		equal(can.viewModel(el), can.data(el, "scope"), "one argument grabs the viewModel object");
+		equal(can.viewModel(el), can.data(el, "viewModel"), "one argument grabs the viewModel object");
 		equal(can.viewModel(el, "foo"), "bar", "two arguments fetches a value");
 		can.viewModel(el, "foo", "baz");
 		equal(can.viewModel(el, "foo"), "baz", "Three arguments sets the value");
 		if (window.$ && $.fn) {
 			el = $("my-taggy-tag");
-			equal(el.viewModel(), can.data(el, "scope"), "jQuery helper grabs the viewModel object");
+			equal(el.viewModel(), can.data(el, "viewModel"), "jQuery helper grabs the viewModel object");
 			equal(el.viewModel("foo"), "baz", "jQuery helper with one argument fetches a property");
 			equal(el.viewModel("foo", "bar").get(0), el.get(0), "jQuery helper returns the element");
 			equal(el.viewModel("foo"), "bar", "jQuery helper with two arguments sets the property");
@@ -703,7 +703,7 @@ steal("can/component", "can/view/stache" ,"can/route", "steal-qunit", function (
 		var el = can.$("#me");
 		var viewModel = can.viewModel(el);
 		ok(!!viewModel, "viewModel created where it didn't exist.");
-		equal(viewModel, can.data(el, "scope"), "viewModel is in the data.");
+		equal(viewModel, can.data(el, "viewModel"), "viewModel is in the data.");
 	});
 
 	test('setting passed variables - two way binding', function () {
@@ -1455,7 +1455,7 @@ steal("can/component", "can/view/stache" ,"can/route", "steal-qunit", function (
 		ok(state.attr('product') == null, 'product was removed');
 	});
 
-	test('changing viewModel property rebinds {scope.<...>} events (#1529)', 2, function(){
+	test('changing viewModel property rebinds {viewModel.<...>} events (#1529)', 2, function(){
 		can.Component.extend({
 			tag: 'rebind-viewmodel',
 			events: {

component/examples/2.html

@@ -1,4 +1,4 @@
-<script id="sites" type="text/mustache" can-autoload>
+<script id="sites" type="text/mustache" can-autorender>
   <table id="websites">
   {{#websites}}
     <tr>
@@ -11,7 +11,7 @@
 <script src="../../node_modules/steal/steal.js"></script>
 <script type='text/javascript'>
 steal("can/util", "can/component", "can/util/fixture",
-	 "can/model", "can/view/autoload",function (can) {
+	 "can/model", "can/view/autorender",function (can) {
 
 
 var websites = [{id:1,name:"CanJS",url:"http://canjs.us"},{id: 2,name:"jQuery++",url:"http://jquerypp.com"},

component/examples/accordion.html

@@ -86,10 +86,10 @@
 	},
 	events: {
 		inserted: function(){
-			this.element.parent().scope().addPanel( this.scope );
+			this.element.parent().viewModel().addPanel( this.viewModel );
 		},
 		removed: function(){
-			this.element.parent().scope().removePanel( this.scope );
+			this.element.parent().viewModel().removePanel( this.viewModel );
 		}
 	}
 });
@@ -101,6 +101,6 @@
 	$(this).remove();
 })
 
-})
+});
 </script>
 

component/examples/click_me.html

@@ -12,7 +12,7 @@
     },
     events: {
       click: function(){
-        this.scope.attr("visible", !this.scope.attr("visible") );
+        this.viewModel.attr("visible", !this.viewModel.attr("visible") );
       }
     }
   });

component/examples/grid.js

@@ -10,17 +10,17 @@ can.Component.extend({
 		},
 		'{deferreddata} change': 'update',
 		update: function () {
-			var deferred = this.scope.attr('deferreddata'),
-				scope = this.scope;
+			var deferred = this.viewModel.attr('deferreddata'),
+				viewModel = this.viewModel;
 			if (can.isDeferred(deferred)) {
 				this.element.find('tbody')
 					.css('opacity', 0.5);
 				deferred.then(function (items) {
-					scope.attr('items')
+					viewModel.attr('items')
 						.attr(items, true);
 				});
 			} else {
-				scope.attr('items')
+				viewModel.attr('items')
 					.attr(deferred, true);
 			}
 		},

component/examples/hello-world.html

@@ -17,7 +17,7 @@
   },
   events: {
     click: function(){
-    	this.scope.attr("visible", true)
+    	this.viewModel.attr("visible", true)
     }
   }
 });

component/examples/paginate.html

@@ -168,23 +168,23 @@
     init: function () {
       this.update();
     },
-    "{scope} deferreddata": "update",
+    "{viewModel} deferreddata": "update",
     update: function () {
-      var deferred = this.scope.attr('deferreddata'),
-        scope = this.scope,
+      var deferred = this.viewModel.attr('deferreddata'),
+        viewModel = this.viewModel,
         el = this.element;
       if (can.isDeferred(deferred)) {
-        this.scope.attr("waiting", true);
+        this.viewModel.attr("waiting", true);
         this.element.find('tbody').css('opacity', 0.5);
         deferred.then(function (items) {
-          scope.attr('items').replace(items);
+          viewModel.attr('items').replace(items);
         });
       } else {
-        scope.attr('items').attr(deferred, true);
+        viewModel.attr('items').attr(deferred, true);
       }
     },
     "{items} change": function () {
-      this.scope.attr("waiting", false);
+      this.viewModel.attr("waiting", false);
       this.element.find('tbody').css('opacity', 1);
     }
   }

component/examples/paginate_events_next.html

@@ -19,7 +19,7 @@
       template: "Page {{page}} <button class='next'>Next</button>",
       events: {
       	".next click": function(){
-      	  this.scope.next();	
+      	  this.viewModel.next();	
         }
       }
     })

component/examples/paginate_events_next_update_page.html

@@ -19,10 +19,10 @@
       template: "Page <span>1</span> <button class='next'>Next</button>",
       events: {
       	".next click": function(){
-      	  this.scope.next();	
+      	  this.viewModel.next();	
        },
        "{scope} offset": function(){
-       	  this.element.find("span").text( this.scope.page() )
+       	  this.element.find("span").text( this.viewModel.page() )
        }
       }
     })

component/examples/tabs.html

@@ -51,7 +51,7 @@
 	tag: "tabs",
 	template: 	
 		"<ul>"+
-			// Create an LI for each item in the panel's scope object
+			// Create an LI for each item in the panel's viewModel object
     		"{{#panels}}"+
     			"<li {{#isActive}}class='active'{{/isActive}} "+
     			    "can-click='makeActive'>"+
@@ -65,7 +65,7 @@
 		// tabs element.
 		panels: [],
 		// When a `<panel>` element is inserted into the document,
-		// it calls this method to add the panel's scope to the
+		// it calls this method to add the panel's viewModel to the
 		// panels array.
 		addPanel: function(panel){
 			// If this is the first panel, activate it.
@@ -75,7 +75,7 @@
 			this.attr("panels").push(panel);
 		},
 		// When a `<panel>` element is removed from the document,
-		// it calls this method to remove the panel's scope from
+		// it calls this method to remove the panel's viewModel from
 		// the panels array.
 		removePanel: function(panel){
 			var panels = this.attr("panels");
@@ -95,12 +95,12 @@
 			this.attr("active",panel);
 			this.attr("panels").each(function(panel){
 				panel.attr("active", false)
-			})
+			});
 			panel.attr("active",true);
 
 		},
-		// this is scope, not mustache
-		// consider removing scope as arg
+		// this is viewModel, not mustache
+		// consider removing viewModel as arg
 		isActive: function( panel ) {
 			return this.attr('active') == panel
 		}
@@ -116,19 +116,19 @@
 	},
 	events: {
 		inserted: function(){
-			this.element.parent().scope().addPanel( this.scope );
+			this.element.parent().viewModel().addPanel( this.viewModel );
 		},
 		removed: function(){
-			this.element.parent().scope().removePanel( this.scope );
+			this.element.parent().viewModel().removePanel( this.viewModel );
 		}
 	}
-})
+});
 
 var foodTypes= new can.List([
 	{title: "Fruits", content: "oranges, apples"},
 	{title: "Breads", content: "pasta, cereal"},
 	{title: "Sweets", content: "ice cream, candy"}
-])
+]);
 window.foodTypes = foodTypes;
 
 $("#out").html( can.view("app",{
@@ -139,9 +139,9 @@
 			content: "Carrots, peas, kale"
 		})
 	}
-}))
+}));
 
 
-})
+});
 </script>
 

component/scope.md

@@ -0,0 +1,5 @@
+@property {*} can.Component.prototype.scope
+@parent can.Component.prototype
+
+@deprecated {2.2} In 2.2 `scope` has been renamed to [can.Component::viewModel] to avoid confusion with [can.view.Scope]. `scope` is still available for backwards compatibility.
+

component/view-model.md

@@ -1,24 +1,19 @@
-@property {Object|can.Map|function} can.Component.prototype.scope
-@parent can.Component.prototype
-
-Provides or describes a [can.Map] constructor function or `can.Map` instance that will be
-used to retrieve values found in the component's [can.Component::template template].
-
-@deprecated In 2.2 `scope` has been renamed to [can.Component::viewModel] to avoid confusion with [can.view.Scope]. `scope` is still available for backwards compatibility.
-
-
 @property {Object|can.Map|function} can.Component.prototype.viewModel
 @parent can.Component.prototype
 
+@description
+
 Provides or describes a [can.Map] constructor function or `can.Map` instance that will be
 used to retrieve values found in the component's [can.Component::template template]. The map 
 instance is initialized with values specified by the component element's attributes.
 
-__Node:__ In 2.1, [can.stache] and [can.mustache] pass values to the
+__Note:__ In 2.1, [can.stache] and [can.mustache] pass values to the
 viewModel differently. To pass data from the viewModel, you must wrap your attribute 
 value with `{}`. In 3.0, `can.mustache`
 will use `can.stache`'s syntax.
 
+
+
 @option {Object} A plain JavaScript object that is used to define the prototype methods and properties of
 [can.Construct constructor function] that extends [can.Map]. For example: