{"action":"created","comment":{"url":"https://api.github.com/repos/canjs/canjs/pulls/comments/46211178","id":46211178,"diff_hunk":"@@ -50,6 +50,205 @@ Components have the ability to bind to special [can.events.inserted inserted] an\n         }\n       }\n \n+## Listening to viewModel events\n+\n+As in [can.Control] we can listening for events inside or outside the Component. We can use a Templated Event Handler for this. Unlike [can.Control] the value inside `{Name}` are looked up on `viewModel` first followed by `this.options` and then the `window` object.\n+You can use the events for:\n+* Tracking changes on [can.List] or [can.Map] like `add`, `remove`, `change`, (`replaced`)\n+* Tracking changes on properties on the viewModel\n+* Tracking changes on [can.Model]-Instance like `created`, `updated`, `destroyed`\n+* Tracking promises on [can.Deferred] \n+\n+The following example shows all the described possibilities:\n+\n+    // set up some fixtures\n+    can.fixture(\"GET /recipes\",function(){\n+        return [\n+            {id: 1, name: \"omelette\"},\n+            {id: 2, name: \"pizza\"}\n+        ];\n+    });\n+\n+    can.fixture(\"POST /recipes\",function(){\n+        return {id: 3, name: \"hot dog\"};\n+    });\n+\n+    can.fixture(\"PUT /recipes/{id}\",function(){\n+        return {id: 3, name: \"sushi\"};\n+    });\n+    \n+    \n+    // describe a resource\n+    var Recipe = can.Model.extend({\n+        id: 'id',\n+        findAll: 'GET /recipes',\n+        create:  'POST /recipes',\n+        update:  'PUT /recipes/{id}',\n+    },{});\n+\n+\n+    // the components viewModel\n+    var ViewModel = can.Map.extend({\n+        define: {\n+            myMap: {\n+                value: function() {\n+                    return new can.Map({\n+                        eggs: 2,\n+                        tomatos: 3\n+                    });\n+                }\n+            },\n+            myList: {\n+                value: function(){\n+                    return new can.List({\n+                        name: 'Marie'\n+                    });\n+                }\n+            },\n+            foo: {\n+                value: \"say hello\"\n+            },\n+            bar: {\n+                get: function(){\n+                    return this.attr('foo').replace('foo', 'bar');\n+                }\n+            },\n+            recipe: {\n+                Type: Recipe\n+            },\n+            myAsyncData: {\n+                // async getter\n+                get: function(lastSet, deferred){\n+                    this.attr(\"myPromise\").always(deferred);\n+                }\n+            },\n+            myPromise: {\n+                Value: can.Deferred\n+            }\n+        }\n+    });\n+\n+    can.Component.extend({\n+        tag: \"example\",\n+        template: '',\n+        helpers: {},\n+        simpleHelpers: {},\n+        viewModel: ViewModel,\n+        events: {\n+            inserted: function(){\n+                // 1.)\n+                this.viewModel.attr('foo', \"say hello world\");\n+                \n+                // 2.)\n+                this.viewModel.attr('myList').push({\n+                    name: 'Justin'\n+                });\n+                \n+                // 3.)\n+                this.viewModel.attr('myList').splice(1,1);\n+\n+                // 4.)\n+                this.viewModel.attr('myList', new can.List(['Maya']));\n+\n+                // 5.)\n+                this.viewModel.attr('myList').replace(new can.List(['Peter']));\n+\n+                // 6.)\n+                this.viewModel.attr('myMap.eggs', 10);\n+\n+                // 7.1.)\n+                this.viewModel.attr('recipe', {name: \"hot dog\"});\n+                this.viewModel.attr('recipe').save();\n+                \n+                // 8.)\n+                this.viewModel.attr('myPromise', Recipe.findAll());\n+            },\n+            '{viewModel.myMap} change': function(){\n+                console.log(\"viewModel's 'myMap' changed!\");\n+            },\n+            '{viewModel} myMap.eggs': function(){\n+                console.log(\"viewModel's 'myMap.eggs' changed!\");\n+            },\n+            '{myMap} eggs': function(){\n+                console.log(\"alias for '{viewModel} myMap.eggs'\");\n+            },\n+            '{viewModel} myList': function(){\n+                console.log(\"viewModel's 'myList' is replaced!\");\n+            },\n+            '{viewModel.myList} change': function(){\n+                console.log(\"viewModel's 'myList' changed!\");\n+            },\n+            '{viewModel.myList} add': function(){\n+                console.log(\"add a item on viewModel's 'myList'\");\n+            },\n+            '{viewModel.myList} remove': function(){\n+                console.log(\"remove a item on viewModel's 'myList'\");\n+            },\n+            '{viewModel} foo': function(){\n+                console.log(\"viewModel's 'foo' changed\");\n+            },\n+            '{viewModel} bar': function(){\n+                console.log(\"viewModel's 'bar' changed\");\n+            },\n+            '{viewModel.recipe} created': function(response, event){\n+                console.log(\"viewModel's 'recipe' created with ID: \"+response.attr('id'));\n+\n+                // add a ID for this instance\n+                this.viewModel.attr('recipe.id', response.attr('id'));\n+                this.viewModel.attr('recipe.name','sushi');\n+\n+                // 7.2.)\n+                // update\n+                this.viewModel.attr('recipe').save();","path":"component/events.md","position":153,"original_position":153,"commit_id":"446810e2da238daed706d8dd12fede4bb4de16b2","original_commit_id":"446810e2da238daed706d8dd12fede4bb4de16b2","user":{"login":"pYr0x","id":1126711,"avatar_url":"https://avatars.githubusercontent.com/u/1126711?v=3","gravatar_id":"","url":"https://api.github.com/users/pYr0x","html_url":"https://github.com/pYr0x","followers_url":"https://api.github.com/users/pYr0x/followers","following_url":"https://api.github.com/users/pYr0x/following{/other_user}","gists_url":"https://api.github.com/users/pYr0x/gists{/gist_id}","starred_url":"https://api.github.com/users/pYr0x/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pYr0x/subscriptions","organizations_url":"https://api.github.com/users/pYr0x/orgs","repos_url":"https://api.github.com/users/pYr0x/repos","events_url":"https://api.github.com/users/pYr0x/events{/privacy}","received_events_url":"https://api.github.com/users/pYr0x/received_events","type":"User","site_admin":false},"body":"you create an instance, get the ID back from the server. the response is just a response, not the recipe model. \r\nto update the recipe model an ID have to set. if not, save() would create a new recipe","created_at":"2015-11-30T22:08:12Z","updated_at":"2015-11-30T22:08:12Z","html_url":"https://github.com/canjs/canjs/pull/2086#discussion_r46211178","pull_request_url":"https://api.github.com/repos/canjs/canjs/pulls/2086","_links":{"self":{"href":"https://api.github.com/repos/canjs/canjs/pulls/comments/46211178"},"html":{"href":"https://github.com/canjs/canjs/pull/2086#discussion_r46211178"},"pull_request":{"href":"https://api.github.com/repos/canjs/canjs/pulls/2086"}}},"pull_request":{"url":"https://api.github.com/repos/canjs/canjs/pulls/2086","id":50747448,"html_url":"https://github.com/canjs/canjs/pull/2086","diff_url":"https://github.com/canjs/canjs/pull/2086.diff","patch_url":"https://github.com/canjs/canjs/pull/2086.patch","issue_url":"https://api.github.com/repos/canjs/canjs/issues/2086","number":2086,"state":"open","locked":false,"title":"Component doc","user":{"login":"pYr0x","id":1126711,"avatar_url":"https://avatars.githubusercontent.com/u/1126711?v=3","gravatar_id":"","url":"https://api.github.com/users/pYr0x","html_url":"https://github.com/pYr0x","followers_url":"https://api.github.com/users/pYr0x/followers","following_url":"https://api.github.com/users/pYr0x/following{/other_user}","gists_url":"https://api.github.com/users/pYr0x/gists{/gist_id}","starred_url":"https://api.github.com/users/pYr0x/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pYr0x/subscriptions","organizations_url":"https://api.github.com/users/pYr0x/orgs","repos_url":"https://api.github.com/users/pYr0x/repos","events_url":"https://api.github.com/users/pYr0x/events{/privacy}","received_events_url":"https://api.github.com/users/pYr0x/received_events","type":"User","site_admin":false},"body":"* improve the component doc\r\n* closes #1740\r\n* add can.Component.prototype.simpleHelpers doc, hopefully corrent with the linking\r\n\r\nimprovement on my PR are welcome... :)","created_at":"2015-11-15T14:23:25Z","updated_at":"2015-11-30T22:08:12Z","closed_at":null,"merged_at":null,"merge_commit_sha":"f5ccdbbec2b05863ff9f53161d28316a9c3af08c","assignee":null,"milestone":{"url":"https://api.github.com/repos/canjs/canjs/milestones/38","html_url":"https://github.com/canjs/canjs/milestones/2.3.4","labels_url":"https://api.github.com/repos/canjs/canjs/milestones/38/labels","id":1435863,"number":38,"title":"2.3.4","description":"","creator":{"login":"daffl","id":338316,"avatar_url":"https://avatars.githubusercontent.com/u/338316?v=3","gravatar_id":"","url":"https://api.github.com/users/daffl","html_url":"https://github.com/daffl","followers_url":"https://api.github.com/users/daffl/followers","following_url":"https://api.github.com/users/daffl/following{/other_user}","gists_url":"https://api.github.com/users/daffl/gists{/gist_id}","starred_url":"https://api.github.com/users/daffl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/daffl/subscriptions","organizations_url":"https://api.github.com/users/daffl/orgs","repos_url":"https://api.github.com/users/daffl/repos","events_url":"https://api.github.com/users/daffl/events{/privacy}","received_events_url":"https://api.github.com/users/daffl/received_events","type":"User","site_admin":false},"open_issues":5,"closed_issues":0,"state":"open","created_at":"2015-11-30T19:02:11Z","updated_at":"2015-11-30T21:07:26Z","due_on":null,"closed_at":null},"commits_url":"https://api.github.com/repos/canjs/canjs/pulls/2086/commits","review_comments_url":"https://api.github.com/repos/canjs/canjs/pulls/2086/comments","review_comment_url":"https://api.github.com/repos/canjs/canjs/pulls/comments{/number}","comments_url":"https://api.github.com/repos/canjs/canjs/issues/2086/comments","statuses_url":"https://api.github.com/repos/canjs/canjs/statuses/446810e2da238daed706d8dd12fede4bb4de16b2","head":{"label":"pYr0x:component-doc","ref":"component-doc","sha":"446810e2da238daed706d8dd12fede4bb4de16b2","user":{"login":"pYr0x","id":1126711,"avatar_url":"https://avatars.githubusercontent.com/u/1126711?v=3","gravatar_id":"","url":"https://api.github.com/users/pYr0x","html_url":"https://github.com/pYr0x","followers_url":"https://api.github.com/users/pYr0x/followers","following_url":"https://api.github.com/users/pYr0x/following{/other_user}","gists_url":"https://api.github.com/users/pYr0x/gists{/gist_id}","starred_url":"https://api.github.com/users/pYr0x/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pYr0x/subscriptions","organizations_url":"https://api.github.com/users/pYr0x/orgs","repos_url":"https://api.github.com/users/pYr0x/repos","events_url":"https://api.github.com/users/pYr0x/events{/privacy}","received_events_url":"https://api.github.com/users/pYr0x/received_events","type":"User","site_admin":false},"repo":{"id":46219864,"name":"canjs","full_name":"pYr0x/canjs","owner":{"login":"pYr0x","id":1126711,"avatar_url":"https://avatars.githubusercontent.com/u/1126711?v=3","gravatar_id":"","url":"https://api.github.com/users/pYr0x","html_url":"https://github.com/pYr0x","followers_url":"https://api.github.com/users/pYr0x/followers","following_url":"https://api.github.com/users/pYr0x/following{/other_user}","gists_url":"https://api.github.com/users/pYr0x/gists{/gist_id}","starred_url":"https://api.github.com/users/pYr0x/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pYr0x/subscriptions","organizations_url":"https://api.github.com/users/pYr0x/orgs","repos_url":"https://api.github.com/users/pYr0x/repos","events_url":"https://api.github.com/users/pYr0x/events{/privacy}","received_events_url":"https://api.github.com/users/pYr0x/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/pYr0x/canjs","description":"Can do JS, better, faster, easier.","fork":true,"url":"https://api.github.com/repos/pYr0x/canjs","forks_url":"https://api.github.com/repos/pYr0x/canjs/forks","keys_url":"https://api.github.com/repos/pYr0x/canjs/keys{/key_id}","collaborators_url":"https://api.github.com/repos/pYr0x/canjs/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/pYr0x/canjs/teams","hooks_url":"https://api.github.com/repos/pYr0x/canjs/hooks","issue_events_url":"https://api.github.com/repos/pYr0x/canjs/issues/events{/number}","events_url":"https://api.github.com/repos/pYr0x/canjs/events","assignees_url":"https://api.github.com/repos/pYr0x/canjs/assignees{/user}","branches_url":"https://api.github.com/repos/pYr0x/canjs/branches{/branch}","tags_url":"https://api.github.com/repos/pYr0x/canjs/tags","blobs_url":"https://api.github.com/repos/pYr0x/canjs/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/pYr0x/canjs/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/pYr0x/canjs/git/refs{/sha}","trees_url":"https://api.github.com/repos/pYr0x/canjs/git/trees{/sha}","statuses_url":"https://api.github.com/repos/pYr0x/canjs/statuses/{sha}","languages_url":"https://api.github.com/repos/pYr0x/canjs/languages","stargazers_url":"https://api.github.com/repos/pYr0x/canjs/stargazers","contributors_url":"https://api.github.com/repos/pYr0x/canjs/contributors","subscribers_url":"https://api.github.com/repos/pYr0x/canjs/subscribers","subscription_url":"https://api.github.com/repos/pYr0x/canjs/subscription","commits_url":"https://api.github.com/repos/pYr0x/canjs/commits{/sha}","git_commits_url":"https://api.github.com/repos/pYr0x/canjs/git/commits{/sha}","comments_url":"https://api.github.com/repos/pYr0x/canjs/comments{/number}","issue_comment_url":"https://api.github.com/repos/pYr0x/canjs/issues/comments{/number}","contents_url":"https://api.github.com/repos/pYr0x/canjs/contents/{+path}","compare_url":"https://api.github.com/repos/pYr0x/canjs/compare/{base}...{head}","merges_url":"https://api.github.com/repos/pYr0x/canjs/merges","archive_url":"https://api.github.com/repos/pYr0x/canjs/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/pYr0x/canjs/downloads","issues_url":"https://api.github.com/repos/pYr0x/canjs/issues{/number}","pulls_url":"https://api.github.com/repos/pYr0x/canjs/pulls{/number}","milestones_url":"https://api.github.com/repos/pYr0x/canjs/milestones{/number}","notifications_url":"https://api.github.com/repos/pYr0x/canjs/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/pYr0x/canjs/labels{/name}","releases_url":"https://api.github.com/repos/pYr0x/canjs/releases{/id}","created_at":"2015-11-15T14:02:40Z","updated_at":"2015-11-15T14:02:46Z","pushed_at":"2015-11-30T21:57:02Z","git_url":"git://github.com/pYr0x/canjs.git","ssh_url":"git@github.com:pYr0x/canjs.git","clone_url":"https://github.com/pYr0x/canjs.git","svn_url":"https://github.com/pYr0x/canjs","homepage":"canjs.com","size":43530,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":0,"mirror_url":null,"open_issues_count":1,"forks":0,"open_issues":1,"watchers":0,"default_branch":"master"}},"base":{"label":"canjs:master","ref":"master","sha":"8186c97b62884b77058b2de5fff9cb1ad4ed75de","user":{"login":"canjs","id":11798761,"avatar_url":"https://avatars.githubusercontent.com/u/11798761?v=3","gravatar_id":"","url":"https://api.github.com/users/canjs","html_url":"https://github.com/canjs","followers_url":"https://api.github.com/users/canjs/followers","following_url":"https://api.github.com/users/canjs/following{/other_user}","gists_url":"https://api.github.com/users/canjs/gists{/gist_id}","starred_url":"https://api.github.com/users/canjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/canjs/subscriptions","organizations_url":"https://api.github.com/users/canjs/orgs","repos_url":"https://api.github.com/users/canjs/repos","events_url":"https://api.github.com/users/canjs/events{/privacy}","received_events_url":"https://api.github.com/users/canjs/received_events","type":"Organization","site_admin":false},"repo":{"id":3228363,"name":"canjs","full_name":"canjs/canjs","owner":{"login":"canjs","id":11798761,"avatar_url":"https://avatars.githubusercontent.com/u/11798761?v=3","gravatar_id":"","url":"https://api.github.com/users/canjs","html_url":"https://github.com/canjs","followers_url":"https://api.github.com/users/canjs/followers","following_url":"https://api.github.com/users/canjs/following{/other_user}","gists_url":"https://api.github.com/users/canjs/gists{/gist_id}","starred_url":"https://api.github.com/users/canjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/canjs/subscriptions","organizations_url":"https://api.github.com/users/canjs/orgs","repos_url":"https://api.github.com/users/canjs/repos","events_url":"https://api.github.com/users/canjs/events{/privacy}","received_events_url":"https://api.github.com/users/canjs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/canjs/canjs","description":"Can do JS, better, faster, easier.","fork":false,"url":"https://api.github.com/repos/canjs/canjs","forks_url":"https://api.github.com/repos/canjs/canjs/forks","keys_url":"https://api.github.com/repos/canjs/canjs/keys{/key_id}","collaborators_url":"https://api.github.com/repos/canjs/canjs/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/canjs/canjs/teams","hooks_url":"https://api.github.com/repos/canjs/canjs/hooks","issue_events_url":"https://api.github.com/repos/canjs/canjs/issues/events{/number}","events_url":"https://api.github.com/repos/canjs/canjs/events","assignees_url":"https://api.github.com/repos/canjs/canjs/assignees{/user}","branches_url":"https://api.github.com/repos/canjs/canjs/branches{/branch}","tags_url":"https://api.github.com/repos/canjs/canjs/tags","blobs_url":"https://api.github.com/repos/canjs/canjs/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/canjs/canjs/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/canjs/canjs/git/refs{/sha}","trees_url":"https://api.github.com/repos/canjs/canjs/git/trees{/sha}","statuses_url":"https://api.github.com/repos/canjs/canjs/statuses/{sha}","languages_url":"https://api.github.com/repos/canjs/canjs/languages","stargazers_url":"https://api.github.com/repos/canjs/canjs/stargazers","contributors_url":"https://api.github.com/repos/canjs/canjs/contributors","subscribers_url":"https://api.github.com/repos/canjs/canjs/subscribers","subscription_url":"https://api.github.com/repos/canjs/canjs/subscription","commits_url":"https://api.github.com/repos/canjs/canjs/commits{/sha}","git_commits_url":"https://api.github.com/repos/canjs/canjs/git/commits{/sha}","comments_url":"https://api.github.com/repos/canjs/canjs/comments{/number}","issue_comment_url":"https://api.github.com/repos/canjs/canjs/issues/comments{/number}","contents_url":"https://api.github.com/repos/canjs/canjs/contents/{+path}","compare_url":"https://api.github.com/repos/canjs/canjs/compare/{base}...{head}","merges_url":"https://api.github.com/repos/canjs/canjs/merges","archive_url":"https://api.github.com/repos/canjs/canjs/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/canjs/canjs/downloads","issues_url":"https://api.github.com/repos/canjs/canjs/issues{/number}","pulls_url":"https://api.github.com/repos/canjs/canjs/pulls{/number}","milestones_url":"https://api.github.com/repos/canjs/canjs/milestones{/number}","notifications_url":"https://api.github.com/repos/canjs/canjs/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/canjs/canjs/labels{/name}","releases_url":"https://api.github.com/repos/canjs/canjs/releases{/id}","created_at":"2012-01-20T17:57:21Z","updated_at":"2015-11-23T20:40:21Z","pushed_at":"2015-11-30T22:03:03Z","git_url":"git://github.com/canjs/canjs.git","ssh_url":"git@github.com:canjs/canjs.git","clone_url":"https://github.com/canjs/canjs.git","svn_url":"https://github.com/canjs/canjs","homepage":"canjs.com","size":44499,"stargazers_count":1265,"watchers_count":1265,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":345,"mirror_url":null,"open_issues_count":250,"forks":345,"open_issues":250,"watchers":1265,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/canjs/canjs/pulls/2086"},"html":{"href":"https://github.com/canjs/canjs/pull/2086"},"issue":{"href":"https://api.github.com/repos/canjs/canjs/issues/2086"},"comments":{"href":"https://api.github.com/repos/canjs/canjs/issues/2086/comments"},"review_comments":{"href":"https://api.github.com/repos/canjs/canjs/pulls/2086/comments"},"review_comment":{"href":"https://api.github.com/repos/canjs/canjs/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/canjs/canjs/pulls/2086/commits"},"statuses":{"href":"https://api.github.com/repos/canjs/canjs/statuses/446810e2da238daed706d8dd12fede4bb4de16b2"}}}}