Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions json-docs/ember/7.1.0/classes/ember-7.1.0-@ember/component.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,17 @@
"methods": [
{
"file": "packages/@ember/-internals/glimmer/lib/components/input.ts",
"line": 55,
"description": "An opaque interface which can be imported and used in strict-mode\ntemplates to call <Input>.\n\nSee [Ember.Templates.components.Input](/ember/release/classes/Ember.Templates.components/methods/Input?anchor=Input).",
"line": 46,
"description": "The `Input` component lets you create an HTML `<input>` element.\n\n```gjs\nimport { Input } from '@ember/component';\n \n<template>\n <Input @value=\"987\" />\n</template>\n```\n\ncreates an `<input>` element with `type=\"text\"` and value set to 987.\n\n### Text field\n\nIf no `type` argument is specified, a default of type 'text' is used.\n\n```handlebars\nSearch:\n<Input @value={{this.searchWord}} />\n```\n\nIn this example, the initial value in the `<input>` will be set to the value of\n`this.searchWord`. If the user changes the text, the value of `this.searchWord` will also be\nupdated.\n\n### Actions\n\nThe `Input` component takes a number of arguments with callbacks that are invoked in response to\nuser events.\n\n* `enter`\n* `insert-newline`\n* `escape-press`\n* `focus-in`\n* `focus-out`\n* `key-down`\n* `key-press`\n* `key-up`\n\nThese callbacks are passed to `Input` like this:\n\n```handlebars\n<Input @value={{this.searchWord}} @enter={{this.query}} />\n```\n\nStarting with Ember Octane, we recommend using the `{{on}}` modifier to call actions\non specific events, such as the input event.\n\n```handlebars\n<label for=\"input-name\">Name:</label>\n<Input\n @id=\"input-name\"\n @value={{this.name}}\n {{on \"input\" this.validateName}}\n/>\n```\n\nThe event name (e.g. `focusout`, `input`, `keydown`) always follows the casing\nthat the HTML standard uses.\n\n### `<input>` HTML Attributes to Avoid\n\nIn most cases, if you want to pass an attribute to the underlying HTML `<input>` element, you\ncan pass the attribute directly, just like any other Ember component.\n\n```handlebars\n<Input @type=\"text\" size=\"10\" />\n```\n\nIn this example, the `size` attribute will be applied to the underlying `<input>` element in the\noutputted HTML.\n\nHowever, there are a few attributes where you **must** use the `@` version.\n\n* `@type`: This argument is used to control which Ember component is used under the hood\n* `@value`: The `@value` argument installs a two-way binding onto the element. If you wanted a\n one-way binding, use `<input>` with the `value` property and the `input` event instead.\n* `@checked` (for checkboxes): like `@value`, the `@checked` argument installs a two-way binding\n onto the element. If you wanted a one-way binding, use `<input type=\"checkbox\">` with\n `checked` and the `input` event instead.\n\n### Checkbox\n\nTo create an `<input type=\"checkbox\">`:\n\n```handlebars\nEmberize Everything:\n<Input @type=\"checkbox\" @checked={{this.isEmberized}} name=\"isEmberized\" />\n```\n\nThis will bind the checked state of this checkbox to the value of `isEmberized` -- if either one\nchanges, it will be reflected in the other.",
"itemtype": "method",
"name": "Input",
"see": [
"{Ember.Templates.components.Input}"
"static": 1,
"params": [
{
"name": "options",
"description": "",
"type": "Hash"
}
],
"access": "public",
"tagname": "",
Expand All @@ -29,13 +34,11 @@
},
{
"file": "packages/@ember/-internals/glimmer/lib/components/textarea.ts",
"line": 136,
"description": "An opaque interface which can be imported and used in strict-mode\ntemplates to call <Textarea>.\n\nSee [Ember.Templates.components.Textarea](/ember/release/classes/Ember.Templates.components/methods/Textarea?anchor=Textarea).",
"line": 10,
"description": "The `Textarea` component inserts a new instance of `<textarea>` tag into the template.\n\nThe `@value` argument provides the content of the `<textarea>`.\n\nThis template:\n\n```handlebars\nimport { Textarea } from '@ember/component';\n\n<template>\n <Textarea @value=\"A bunch of text\" />\n</template>\n```\n\nWould result in the following HTML:\n\n```html\n<textarea class=\"ember-text-area\">\n A bunch of text\n</textarea>\n```\n\nThe `@value` argument is two-way bound. If the user types text into the textarea, the `@value`\nargument is updated. If the `@value` argument is updated, the text in the textarea is updated.\n\nIn the following example, the `writtenWords` property on the component will be updated as the user\ntypes 'Lots of text' into the text area of their browser's window.\n\n```gjs {data-filename=\"app/components/word-editor.gjs\"}\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class WordEditorComponent extends Component {\n @tracked writtenWords = \"Lots of text that IS bound\";\n \n <template>\n <Textarea @value={{writtenWords}} />\n </template>\n}\n```\n\nWould result in the following HTML:\n\n```html\n<textarea class=\"ember-text-area\">\n Lots of text that IS bound\n</textarea>\n```\n\nIf you wanted a one way binding, you could use the `<textarea>` element directly, and use the\n`value` DOM property and the `input` event.\n\n### Actions\n\nThe `Textarea` component takes a number of arguments with callbacks that are invoked in\nresponse to user events.\n\n* `enter`\n* `insert-newline`\n* `escape-press`\n* `focus-in`\n* `focus-out`\n* `key-press`\n\nThese callbacks are passed to `Textarea` like this:\n\n```handlebars\n<Textarea @value={{this.searchWord}} @enter={{this.query}} />\n```\n\n## Classic Invocation Syntax\n\nThe `Textarea` component can also be invoked using curly braces, just like any other Ember\ncomponent.\n\nFor example, this is an invocation using angle-bracket notation:\n\n```handlebars\n<Textarea @value={{this.searchWord}} @enter={{this.query}} />\n```\n\nYou could accomplish the same thing using classic invocation:\n\n```handlebars\n{{textarea value=this.searchWord enter=this.query}}\n```\n\nThe main difference is that angle-bracket invocation supports any HTML attribute using HTML\nattribute syntax, because attributes and arguments have different syntax when using angle-bracket\ninvocation. Curly brace invocation, on the other hand, only has a single syntax for arguments,\nand components must manually map attributes onto component arguments.\n\nWhen using classic invocation with `{{textarea}}`, only the following attributes are mapped onto\narguments:\n\n* rows\n* cols\n* name\n* selectionEnd\n* selectionStart\n* autocomplete\n* wrap\n* lang\n* dir\n* value\n\n## Classic `layout` and `layoutName` properties\n\nBecause HTML `textarea` elements do not contain inner HTML the `layout` and\n`layoutName` properties will not be applied.",
"itemtype": "method",
"name": "Textarea",
"see": [
"{Ember.Templates.components.Textarea}"
],
"static": 1,
"access": "public",
"tagname": "",
"class": "@ember/component",
Expand Down
327 changes: 32 additions & 295 deletions json-docs/ember/7.1.0/classes/ember-7.1.0-@ember/helper.json

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
{
"file": "packages/@ember/object/compat.ts",
"line": 45,
"description": "`@dependentKeyCompat` is decorator that can be used on _native getters_ that\nuse tracked properties. It exposes the getter to Ember's classic computed\nproperty and observer systems, so they can watch it for changes. It can be\nused in both native and classic classes.\n\nNative Example:\n\n```js\nimport { tracked } from '@glimmer/tracking';\nimport { dependentKeyCompat } from '@ember/object/compat';\nimport { computed, set } from '@ember/object';\n\nclass Person {\n @tracked firstName;\n @tracked lastName;\n\n @dependentKeyCompat\n get fullName() {\n return `${this.firstName} ${this.lastName}`;\n }\n}\n\nclass Profile {\n constructor(person) {\n set(this, 'person', person);\n }\n\n @computed('person.fullName')\n get helloMessage() {\n return `Hello, ${this.person.fullName}!`;\n }\n}\n```\n\nClassic Example:\n\n```js\nimport { tracked } from '@glimmer/tracking';\nimport { dependentKeyCompat } from '@ember/object/compat';\nimport EmberObject, { computed, observer, set } from '@ember/object';\n\nconst Person = EmberObject.extend({\n firstName: tracked(),\n lastName: tracked(),\n\n fullName: dependentKeyCompat(function() {\n return `${this.firstName} ${this.lastName}`;\n }),\n});\n\nconst Profile = EmberObject.extend({\n person: null,\n\n helloMessage: computed('person.fullName', function() {\n return `Hello, ${this.person.fullName}!`;\n }),\n\n onNameUpdated: observer('person.fullName', function() {\n console.log('person name updated!');\n }),\n});\n```\n\n`dependentKeyCompat()` can receive a getter function or an object containing\n`get`/`set` methods when used in classic classes, like computed properties.\n\nIn general, only properties which you _expect_ to be watched by older,\nuntracked clases should be marked as dependency compatible. The decorator is\nmeant as an interop layer for parts of Ember's older classic APIs, and should\nnot be applied to every possible getter/setter in classes. The number of\ndependency compatible getters should be _minimized_ wherever possible. New\napplication code should not need to use `@dependentKeyCompat`, since it is\nonly for interoperation with older code.",
"description": "`@dependentKeyCompat` is decorator that can be used on _native getters_ that\nuse tracked properties. It exposes the getter to Ember's classic computed\nproperty and observer systems, so they can watch it for changes. It can be\nused in both native and classic classes.\n\nNative Example:\n\n```js\nimport { tracked } from '@glimmer/tracking';\nimport { dependentKeyCompat } from '@ember/object/compat';\nimport { computed, set } from '@ember/object';\n\nclass Person {\n @tracked firstName;\n @tracked lastName;\n\n @dependentKeyCompat\n get fullName() {\n return `${this.firstName} ${this.lastName}`;\n }\n}\n\nclass Profile {\n constructor(person) {\n set(this, 'person', person);\n }\n\n @computed('person.fullName')\n get helloMessage() {\n return `Hello, ${this.person.fullName}!`;\n }\n}\n```\n\nIn general, only properties which you _expect_ to be watched by older,\nuntracked clases should be marked as dependency compatible. The decorator is\nmeant as an interop layer for parts of Ember's older classic APIs, and should\nnot be applied to every possible getter/setter in classes. The number of\ndependency compatible getters should be _minimized_ wherever possible. New\napplication code should not need to use `@dependentKeyCompat`, since it is\nonly for interoperation with older code.",
"access": "public",
"tagname": "",
"itemtype": "method",
Expand Down
8 changes: 3 additions & 5 deletions json-docs/ember/7.1.0/classes/ember-7.1.0-@ember/routing.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,11 @@
"methods": [
{
"file": "packages/@ember/-internals/glimmer/lib/components/link-to.ts",
"line": 273,
"description": "An opaque interface which can be imported and used in strict-mode\ntemplates to call <LinkTo>.\n\nSee [Ember.Templates.components.LinkTo](/ember/release/classes/Ember.Templates.components/methods/input?anchor=LinkTo).",
"line": 52,
"description": "The `LinkTo` component renders a link to the supplied `routeName` passing an optionally\nsupplied model to the route as its `model` context of the route. The block for `LinkTo`\nbecomes the contents of the rendered element:\n\n```gjs\nimport { LinkTo } from '@ember/routing';\n \n<template>\n <LinkTo @route='photoGallery'>\n Great Hamster Photos\n </LinkTo>\n</template>\n```\n\nThis will result in:\n\n```html\n<a href=\"/hamster-photos\">\n Great Hamster Photos\n</a>\n```\n\n### Disabling the `LinkTo` component\n\nThe `LinkTo` component can be disabled by using the `disabled` argument. A disabled link\ndoesn't result in a transition when activated, and adds the `disabled` class to the `<a>`\nelement.\n\n(The class name to apply to the element can be overridden by using the `disabledClass`\nargument)\n\n```handlebars\n<LinkTo @route='photoGallery' @disabled={{true}}>\n Great Hamster Photos\n</LinkTo>\n```\n\n### Handling `href`\n\n`<LinkTo>` will use your application's Router to fill the element's `href` property with a URL\nthat matches the path to the supplied `routeName`.\n\n### Handling current route\n\nThe `LinkTo` component will apply a CSS class name of 'active' when the application's current\nroute matches the supplied routeName. For example, if the application's current route is\n'photoGallery.recent', then the following invocation of `LinkTo`:\n\n```handlebars\n<LinkTo @route='photoGallery.recent'>\n Great Hamster Photos\n</LinkTo>\n```\n\nwill result in\n\n```html\n<a href=\"/hamster-photos/this-week\" class=\"active\">\n Great Hamster Photos\n</a>\n```\n\nThe CSS class used for active classes can be customized by passing an `activeClass` argument:\n\n```handlebars\n<LinkTo @route='photoGallery.recent' @activeClass=\"current-url\">\n Great Hamster Photos\n</LinkTo>\n```\n\n```html\n<a href=\"/hamster-photos/this-week\" class=\"current-url\">\n Great Hamster Photos\n</a>\n```\n\n### Keeping a link active for other routes\n\nIf you need a link to be 'active' even when it doesn't match the current route, you can use the\n`current-when` argument.\n\n```handlebars\n<LinkTo @route='photoGallery' @current-when='photos'>\n Photo Gallery\n</LinkTo>\n```\n\nThis may be helpful for keeping links active for:\n\n* non-nested routes that are logically related\n* some secondary menu approaches\n* 'top navigation' with 'sub navigation' scenarios\n\nA link will be active if `current-when` is `true` or the current\nroute is the route this link would transition to.\n\nTo match multiple routes 'space-separate' the routes:\n\n```handlebars\n<LinkTo @route='gallery' @current-when='photos drawings paintings'>\n Art Gallery\n</LinkTo>\n```\n\n### Supplying a model\n\nAn optional `model` argument can be used for routes whose\npaths contain dynamic segments. This argument will become\nthe model context of the linked route:\n\n```javascript\nRouter.map(function() {\n this.route(\"photoGallery\", {path: \"hamster-photos/:photo_id\"});\n});\n```\n\n```handlebars\n<LinkTo @route='photoGallery' @model={{this.aPhoto}}>\n {{aPhoto.title}}\n</LinkTo>\n```\n\n```html\n<a href=\"/hamster-photos/42\">\n Tomster\n</a>\n```\n\n### Supplying multiple models\n\nFor deep-linking to route paths that contain multiple\ndynamic segments, the `models` argument can be used.\n\nAs the router transitions through the route path, each\nsupplied model argument will become the context for the\nroute with the dynamic segments:\n\n```javascript\nRouter.map(function() {\n this.route(\"photoGallery\", { path: \"hamster-photos/:photo_id\" }, function() {\n this.route(\"comment\", {path: \"comments/:comment_id\"});\n });\n});\n```\n\nThis argument will become the model context of the linked route:\n\n```handlebars\n<LinkTo @route='photoGallery.comment' @models={{array this.aPhoto this.comment}}>\n {{comment.body}}\n</LinkTo>\n```\n\n```html\n<a href=\"/hamster-photos/42/comments/718\">\n A+++ would snuggle again.\n</a>\n```\n\n### Supplying an explicit dynamic segment value\n\nIf you don't have a model object available to pass to `LinkTo`,\nan optional string or integer argument can be passed for routes whose\npaths contain dynamic segments. This argument will become the value\nof the dynamic segment:\n\n```javascript\nRouter.map(function() {\n this.route(\"photoGallery\", { path: \"hamster-photos/:photo_id\" });\n});\n```\n\n```handlebars\n<LinkTo @route='photoGallery' @model={{aPhotoId}}>\n {{this.aPhoto.title}}\n</LinkTo>\n```\n\n```html\n<a href=\"/hamster-photos/42\">\n Tomster\n</a>\n```\n\nWhen transitioning into the linked route, the `model` hook will\nbe triggered with parameters including this passed identifier.\n\n### Supplying query parameters\n\nIf you need to add optional key-value pairs that appear to the right of the ? in a URL,\nyou can use the `query` argument.\n\n```handlebars\n<LinkTo @route='photoGallery' @query={{hash page=1 per_page=20}}>\n Great Hamster Photos\n</LinkTo>\n```\n\nThis will result in:\n\n```html\n<a href=\"/hamster-photos?page=1&per_page=20\">\n Great Hamster Photos\n</a>\n```",
"itemtype": "method",
"name": "LinkTo",
"see": [
"{Ember.Templates.components.LinkTo}"
],
"static": 1,
"access": "public",
"tagname": "",
"class": "@ember/routing",
Expand Down
Loading
Loading