{"action":"created","comment":{"url":"https://api.github.com/repos/emberjs/guides/pulls/comments/39921775","id":39921775,"diff_hunk":"@@ -0,0 +1,231 @@\n+Imagine if functions aren't allowed to take arguments: they won't be very\n+useful at all, right? Likewise, if we cannot pass data to our Components, they\n+would just be fancy partials with limited uses. Fortunately, Ember made it very\n+easy to pass data into our Components.\n+\n+## Passing Attributes\n+\n+When invoking Components, you can pass along any number of named attributes,\n+just like how you can set attributes on regular HTML elements:\n+\n+```app/templates/contact-us.hbs\n+<h5><x-icon type=\"speech-bubble\" size=\"large\" /> Contact Us</h5>\n+\n+<x-icon type=\"phone\" /> 1-800-EMBER-JS <br>\n+<x-icon type=\"twitter\" /> @emberjs <br>\n+<x-icon type=\"map\" /> 123 Some Street, Portland OR\n+```\n+\n+These attributes can then be accessed from the Component's template via the\n+`attrs` hash:\n+\n+```app/templates/components/x-icon.hbs\n+<x-icon class=\"icon icon-{{attrs.type}} {{attrs.size}}\" />\n+```\n+\n+You might be wondering: what's the point of going through the `attrs` hash?\n+Couldn't Ember just expose the attributes as `{{type}}` instead of the nosier\n+`{{attrs.type}}`? Hold your thoughts! We will come back to that soon.\n+\n+In addition to string attributes, sometimes you might need to pass other kind\n+of data such as numbers and booleans. You can do this using the curlies syntax\n+instead of quotation marks:\n+\n+```app/templates/step-two.hbs\n+<progress-bar value={{2}} max={{10}} animated={{true}} /> Step 2 / 10","path":"source/glimmer-components/passing-data-to-components.md","position":35,"original_position":35,"commit_id":"cb4f38f9cea6161d70457fe78d1ed1fdea2ee8ee","original_commit_id":"cb4f38f9cea6161d70457fe78d1ed1fdea2ee8ee","user":{"login":"wycats","id":4,"avatar_url":"https://avatars.githubusercontent.com/u/4?v=3","gravatar_id":"","url":"https://api.github.com/users/wycats","html_url":"https://github.com/wycats","followers_url":"https://api.github.com/users/wycats/followers","following_url":"https://api.github.com/users/wycats/following{/other_user}","gists_url":"https://api.github.com/users/wycats/gists{/gist_id}","starred_url":"https://api.github.com/users/wycats/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wycats/subscriptions","organizations_url":"https://api.github.com/users/wycats/orgs","repos_url":"https://api.github.com/users/wycats/repos","events_url":"https://api.github.com/users/wycats/events{/privacy}","received_events_url":"https://api.github.com/users/wycats/received_events","type":"User","site_admin":false},"body":"Note that the DOM spec mirrors almost all properties to attributes, so leaving off quotation marks will mostly do what you expect but allow you to pass values (booleans, dates, etc.) instead of strings. This is especially important for things like `value={{name}}`, whose attribute assigns a \"default value\", but the property updates the `.value`.\r\n\r\nBecause of the fact that attributes and properties are melded together in the user's mental model already, the DOM has done work to make attribute strings and property values mostly mirror. What this means is if we hew closely to the same fuzzy mental model that the DOM already worked hard to support, things will work with the same caveats as DOM.","created_at":"2015-09-19T17:36:52Z","updated_at":"2015-09-19T17:36:52Z","html_url":"https://github.com/emberjs/guides/pull/764#discussion_r39921775","pull_request_url":"https://api.github.com/repos/emberjs/guides/pulls/764","_links":{"self":{"href":"https://api.github.com/repos/emberjs/guides/pulls/comments/39921775"},"html":{"href":"https://github.com/emberjs/guides/pull/764#discussion_r39921775"},"pull_request":{"href":"https://api.github.com/repos/emberjs/guides/pulls/764"}}},"pull_request":{"url":"https://api.github.com/repos/emberjs/guides/pulls/764","id":45441040,"html_url":"https://github.com/emberjs/guides/pull/764","diff_url":"https://github.com/emberjs/guides/pull/764.diff","patch_url":"https://github.com/emberjs/guides/pull/764.patch","issue_url":"https://api.github.com/repos/emberjs/guides/issues/764","number":764,"state":"open","locked":false,"title":"[WIP] Glimmer Components guides","user":{"login":"chancancode","id":55829,"avatar_url":"https://avatars.githubusercontent.com/u/55829?v=3","gravatar_id":"","url":"https://api.github.com/users/chancancode","html_url":"https://github.com/chancancode","followers_url":"https://api.github.com/users/chancancode/followers","following_url":"https://api.github.com/users/chancancode/following{/other_user}","gists_url":"https://api.github.com/users/chancancode/gists{/gist_id}","starred_url":"https://api.github.com/users/chancancode/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chancancode/subscriptions","organizations_url":"https://api.github.com/users/chancancode/orgs","repos_url":"https://api.github.com/users/chancancode/repos","events_url":"https://api.github.com/users/chancancode/events{/privacy}","received_events_url":"https://api.github.com/users/chancancode/received_events","type":"User","site_admin":false},"body":"## The Goal\r\n\r\nIntroduce the Glimmer Component feature to new and existing users.\r\n\r\nThe actual motivations of the feature itself should already be documented in the first few sections, but the high order bid is \"component as an abstraction\".\r\n\r\nOnce the feature has shipped (looking like past 2.2, so maybe 2.3? see below), my current thinking is that we can somehow keep the \"legacy\" components guides accessible but hidden by default. For example, on the top of the \"Introduction\" section, there will be a highly visible \"Note: this is for new stuff, for old stuff, see here\", and once you navigated into the old section, it will be available in the navigation.\r\n\r\n## Philosophy\r\n\r\n* Prioritize linear reading/initial learning\r\n* Introduce concepts in small increments\r\n\r\nFor example, I chose to *not* mention yielding values to blocks when the concept of \"blocks\" was first introduced. (As opposed to mentioning \"everything you need to know about blocks\" in one section, which is better for someone who already learned the concepts and want to look something up again.)\r\n\r\n## Table of Content\r\n\r\n- [x] Introduction (motivation)\r\n- [x] Refactoring Templates into Components\r\n- [x] The Anatomy of a Component (syntax for defining and invoking components)\r\n- [x] Passing Data to Components (`attrs` and blocks)\r\n- [x] Adding Behavior and Keeping States (introducing the `GlimmerComponent` JS class and keeping internal states)\r\n- [x] Handling User Interaction (internal to the component)\r\n- [ ] Communicating With The Outside World (communicating with the parent by passing callbacks/closure actions, aka DDAU, `{{mut}}` helper)\r\n- [ ] Reacting to Changes (computed properties, and lifecycle callbacks)\r\n- [ ] Composing Components (a more fleshed out example with more than two levels of composition, probably based on the current examples, and \"advanced\" features like yielding values to blocks that are deliberately left-out from earlier chapters)\r\n- [ ] Migrating From Legacy Components (a table of differences, enumerate benefits and steps to migrate)\r\n\r\n## Current Status\r\n\r\nThe feature itself is pretty close to completion in the broad strokes, but there are plenty of nuances that needs to be fleshed out. Writing these guides was quite helpful in terms of uncovering holes in the model, and we have identified the right solutions for most of these things (but not implemented at the moment).\r\n\r\nWe also identified some performance issues, which we decided to prioritize over this feature, so we will likely not ship this until ~2.3.\r\n\r\nIn particular, I am currently semi-blocked on the \"Communicating With The Outside World\" section by one of these issues. (I already written some of the text, but haven't committed yet. Here is [the example](http://ember-twiddle.com/6537a168c78cd55083ab) I am planning to use.)\r\n\r\nSince we are prioritizing performance for 2.2, this will probably be put back on the back burner for a bit until we pick up the GC feature again in a few weeks.\r\n\r\nGrammar/spell-checks are not very high-priority at the moment (because entire sections could still be rewritten or scraped), but if you noticed anything, feel free to leave a line comment and I'll eventually deal with them.\r\n\r\nHigh-level feedback (I don't like the flow here, I don't think you can assume knowledge about X here, I tried to learn it following the guides but I was confused about Y) would be quite helpful.\r\n\r\n## Misc TODOs\r\n\r\n- Fix known issues (top-level partials, recursive invocation, etc)\r\n- Finalize the actual `import` syntax/path\r\n- Update the Twiddle examples as things change\r\n- Properties vs Attributes\r\n- Overridable `update` in `{{mut}}`\r\n- API docs","created_at":"2015-09-18T19:03:41Z","updated_at":"2015-09-19T17:36:52Z","closed_at":null,"merged_at":null,"merge_commit_sha":"3437ad4174602c22b9560af2c9aa411d0eb1933c","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/emberjs/guides/pulls/764/commits","review_comments_url":"https://api.github.com/repos/emberjs/guides/pulls/764/comments","review_comment_url":"https://api.github.com/repos/emberjs/guides/pulls/comments{/number}","comments_url":"https://api.github.com/repos/emberjs/guides/issues/764/comments","statuses_url":"https://api.github.com/repos/emberjs/guides/statuses/cb4f38f9cea6161d70457fe78d1ed1fdea2ee8ee","head":{"label":"tildeio:glimmer-components","ref":"glimmer-components","sha":"cb4f38f9cea6161d70457fe78d1ed1fdea2ee8ee","user":{"login":"tildeio","id":1355851,"avatar_url":"https://avatars.githubusercontent.com/u/1355851?v=3","gravatar_id":"","url":"https://api.github.com/users/tildeio","html_url":"https://github.com/tildeio","followers_url":"https://api.github.com/users/tildeio/followers","following_url":"https://api.github.com/users/tildeio/following{/other_user}","gists_url":"https://api.github.com/users/tildeio/gists{/gist_id}","starred_url":"https://api.github.com/users/tildeio/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tildeio/subscriptions","organizations_url":"https://api.github.com/users/tildeio/orgs","repos_url":"https://api.github.com/users/tildeio/repos","events_url":"https://api.github.com/users/tildeio/events{/privacy}","received_events_url":"https://api.github.com/users/tildeio/received_events","type":"Organization","site_admin":false},"repo":{"id":41760432,"name":"guides","full_name":"tildeio/guides","owner":{"login":"tildeio","id":1355851,"avatar_url":"https://avatars.githubusercontent.com/u/1355851?v=3","gravatar_id":"","url":"https://api.github.com/users/tildeio","html_url":"https://github.com/tildeio","followers_url":"https://api.github.com/users/tildeio/followers","following_url":"https://api.github.com/users/tildeio/following{/other_user}","gists_url":"https://api.github.com/users/tildeio/gists{/gist_id}","starred_url":"https://api.github.com/users/tildeio/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tildeio/subscriptions","organizations_url":"https://api.github.com/users/tildeio/orgs","repos_url":"https://api.github.com/users/tildeio/repos","events_url":"https://api.github.com/users/tildeio/events{/privacy}","received_events_url":"https://api.github.com/users/tildeio/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/tildeio/guides","description":"The source for http://guides.emberjs.com","fork":true,"url":"https://api.github.com/repos/tildeio/guides","forks_url":"https://api.github.com/repos/tildeio/guides/forks","keys_url":"https://api.github.com/repos/tildeio/guides/keys{/key_id}","collaborators_url":"https://api.github.com/repos/tildeio/guides/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/tildeio/guides/teams","hooks_url":"https://api.github.com/repos/tildeio/guides/hooks","issue_events_url":"https://api.github.com/repos/tildeio/guides/issues/events{/number}","events_url":"https://api.github.com/repos/tildeio/guides/events","assignees_url":"https://api.github.com/repos/tildeio/guides/assignees{/user}","branches_url":"https://api.github.com/repos/tildeio/guides/branches{/branch}","tags_url":"https://api.github.com/repos/tildeio/guides/tags","blobs_url":"https://api.github.com/repos/tildeio/guides/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/tildeio/guides/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/tildeio/guides/git/refs{/sha}","trees_url":"https://api.github.com/repos/tildeio/guides/git/trees{/sha}","statuses_url":"https://api.github.com/repos/tildeio/guides/statuses/{sha}","languages_url":"https://api.github.com/repos/tildeio/guides/languages","stargazers_url":"https://api.github.com/repos/tildeio/guides/stargazers","contributors_url":"https://api.github.com/repos/tildeio/guides/contributors","subscribers_url":"https://api.github.com/repos/tildeio/guides/subscribers","subscription_url":"https://api.github.com/repos/tildeio/guides/subscription","commits_url":"https://api.github.com/repos/tildeio/guides/commits{/sha}","git_commits_url":"https://api.github.com/repos/tildeio/guides/git/commits{/sha}","comments_url":"https://api.github.com/repos/tildeio/guides/comments{/number}","issue_comment_url":"https://api.github.com/repos/tildeio/guides/issues/comments{/number}","contents_url":"https://api.github.com/repos/tildeio/guides/contents/{+path}","compare_url":"https://api.github.com/repos/tildeio/guides/compare/{base}...{head}","merges_url":"https://api.github.com/repos/tildeio/guides/merges","archive_url":"https://api.github.com/repos/tildeio/guides/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/tildeio/guides/downloads","issues_url":"https://api.github.com/repos/tildeio/guides/issues{/number}","pulls_url":"https://api.github.com/repos/tildeio/guides/pulls{/number}","milestones_url":"https://api.github.com/repos/tildeio/guides/milestones{/number}","notifications_url":"https://api.github.com/repos/tildeio/guides/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/tildeio/guides/labels{/name}","releases_url":"https://api.github.com/repos/tildeio/guides/releases{/id}","created_at":"2015-09-01T20:03:09Z","updated_at":"2015-09-02T08:15:17Z","pushed_at":"2015-09-09T00:58:34Z","git_url":"git://github.com/tildeio/guides.git","ssh_url":"git@github.com:tildeio/guides.git","clone_url":"https://github.com/tildeio/guides.git","svn_url":"https://github.com/tildeio/guides","homepage":null,"size":25293,"stargazers_count":1,"watchers_count":1,"language":"CSS","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":1,"mirror_url":null,"open_issues_count":0,"forks":1,"open_issues":0,"watchers":1,"default_branch":"master"}},"base":{"label":"emberjs:master","ref":"master","sha":"84033f45fe6822d57c91783b86c2927406376b02","user":{"login":"emberjs","id":1253363,"avatar_url":"https://avatars.githubusercontent.com/u/1253363?v=3","gravatar_id":"","url":"https://api.github.com/users/emberjs","html_url":"https://github.com/emberjs","followers_url":"https://api.github.com/users/emberjs/followers","following_url":"https://api.github.com/users/emberjs/following{/other_user}","gists_url":"https://api.github.com/users/emberjs/gists{/gist_id}","starred_url":"https://api.github.com/users/emberjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emberjs/subscriptions","organizations_url":"https://api.github.com/users/emberjs/orgs","repos_url":"https://api.github.com/users/emberjs/repos","events_url":"https://api.github.com/users/emberjs/events{/privacy}","received_events_url":"https://api.github.com/users/emberjs/received_events","type":"Organization","site_admin":false},"repo":{"id":22767401,"name":"guides","full_name":"emberjs/guides","owner":{"login":"emberjs","id":1253363,"avatar_url":"https://avatars.githubusercontent.com/u/1253363?v=3","gravatar_id":"","url":"https://api.github.com/users/emberjs","html_url":"https://github.com/emberjs","followers_url":"https://api.github.com/users/emberjs/followers","following_url":"https://api.github.com/users/emberjs/following{/other_user}","gists_url":"https://api.github.com/users/emberjs/gists{/gist_id}","starred_url":"https://api.github.com/users/emberjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emberjs/subscriptions","organizations_url":"https://api.github.com/users/emberjs/orgs","repos_url":"https://api.github.com/users/emberjs/repos","events_url":"https://api.github.com/users/emberjs/events{/privacy}","received_events_url":"https://api.github.com/users/emberjs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/emberjs/guides","description":"The source for http://guides.emberjs.com","fork":false,"url":"https://api.github.com/repos/emberjs/guides","forks_url":"https://api.github.com/repos/emberjs/guides/forks","keys_url":"https://api.github.com/repos/emberjs/guides/keys{/key_id}","collaborators_url":"https://api.github.com/repos/emberjs/guides/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/emberjs/guides/teams","hooks_url":"https://api.github.com/repos/emberjs/guides/hooks","issue_events_url":"https://api.github.com/repos/emberjs/guides/issues/events{/number}","events_url":"https://api.github.com/repos/emberjs/guides/events","assignees_url":"https://api.github.com/repos/emberjs/guides/assignees{/user}","branches_url":"https://api.github.com/repos/emberjs/guides/branches{/branch}","tags_url":"https://api.github.com/repos/emberjs/guides/tags","blobs_url":"https://api.github.com/repos/emberjs/guides/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/emberjs/guides/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/emberjs/guides/git/refs{/sha}","trees_url":"https://api.github.com/repos/emberjs/guides/git/trees{/sha}","statuses_url":"https://api.github.com/repos/emberjs/guides/statuses/{sha}","languages_url":"https://api.github.com/repos/emberjs/guides/languages","stargazers_url":"https://api.github.com/repos/emberjs/guides/stargazers","contributors_url":"https://api.github.com/repos/emberjs/guides/contributors","subscribers_url":"https://api.github.com/repos/emberjs/guides/subscribers","subscription_url":"https://api.github.com/repos/emberjs/guides/subscription","commits_url":"https://api.github.com/repos/emberjs/guides/commits{/sha}","git_commits_url":"https://api.github.com/repos/emberjs/guides/git/commits{/sha}","comments_url":"https://api.github.com/repos/emberjs/guides/comments{/number}","issue_comment_url":"https://api.github.com/repos/emberjs/guides/issues/comments{/number}","contents_url":"https://api.github.com/repos/emberjs/guides/contents/{+path}","compare_url":"https://api.github.com/repos/emberjs/guides/compare/{base}...{head}","merges_url":"https://api.github.com/repos/emberjs/guides/merges","archive_url":"https://api.github.com/repos/emberjs/guides/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/emberjs/guides/downloads","issues_url":"https://api.github.com/repos/emberjs/guides/issues{/number}","pulls_url":"https://api.github.com/repos/emberjs/guides/pulls{/number}","milestones_url":"https://api.github.com/repos/emberjs/guides/milestones{/number}","notifications_url":"https://api.github.com/repos/emberjs/guides/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/emberjs/guides/labels{/name}","releases_url":"https://api.github.com/repos/emberjs/guides/releases{/id}","created_at":"2014-08-08T18:25:02Z","updated_at":"2015-09-18T19:59:54Z","pushed_at":"2015-09-19T15:31:31Z","git_url":"git://github.com/emberjs/guides.git","ssh_url":"git@github.com:emberjs/guides.git","clone_url":"https://github.com/emberjs/guides.git","svn_url":"https://github.com/emberjs/guides","homepage":null,"size":30369,"stargazers_count":132,"watchers_count":132,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":356,"mirror_url":null,"open_issues_count":33,"forks":356,"open_issues":33,"watchers":132,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/emberjs/guides/pulls/764"},"html":{"href":"https://github.com/emberjs/guides/pull/764"},"issue":{"href":"https://api.github.com/repos/emberjs/guides/issues/764"},"comments":{"href":"https://api.github.com/repos/emberjs/guides/issues/764/comments"},"review_comments":{"href":"https://api.github.com/repos/emberjs/guides/pulls/764/comments"},"review_comment":{"href":"https://api.github.com/repos/emberjs/guides/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/emberjs/guides/pulls/764/commits"},"statuses":{"href":"https://api.github.com/repos/emberjs/guides/statuses/cb4f38f9cea6161d70457fe78d1ed1fdea2ee8ee"}}}}