@ember-learn/guides-source
Advanced tools
Comparing version 3.2.6 to 3.3.0
@@ -43,3 +43,3 @@ In addition to normal text, you may also want to have your templates | ||
By default, helpers and components only accept a limited number of HTML attributes. | ||
By default, components only accept a limited number of HTML attributes. | ||
This means that some uncommon but perfectly valid attributes, such as `lang` or | ||
@@ -50,29 +50,23 @@ custom `data-*` attributes must be specifically enabled. For example, this template: | ||
{{#link-to "photos" data-toggle="dropdown" lang="es"}}Fotos{{/link-to}} | ||
{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}} | ||
``` | ||
renders the following HTML: | ||
Will render the following HTML: | ||
```html | ||
<a id="ember239" class="ember-view" href="#/photos">Fotos</a> | ||
<input id="ember257" class="ember-view ember-text-field" type="text" | ||
title="Name"> | ||
``` | ||
To enable support for these attributes an attribute binding must be | ||
added to the component, e.g. | ||
To enable support for these attributes, an attribute binding must be | ||
added for each specific attribute on the component. | ||
To do this, you can extend the appropriate components | ||
in your application. For example, for `link-to` you would create your own version | ||
of this component by extending | ||
[`Ember.LinkComponent`](https://www.emberjs.com/api/ember/release/classes/LinkComponent) | ||
or [`Ember.TextField`](https://www.emberjs.com/api/ember/release/classes/TextField) | ||
for the specific attribute: | ||
```javascript | ||
Ember.LinkComponent.reopen({ | ||
```javascript {data-filename="app/components/link-to/component.js"} | ||
import LinkComponent from '@ember/routing/link-component'; | ||
export default LinkComponent.extend({ | ||
attributeBindings: ['data-toggle', 'lang'] | ||
}); | ||
Ember.TextField.reopen({ | ||
attributeBindings: ['data-toggle', 'data-placement'] | ||
}); | ||
``` | ||
@@ -83,6 +77,3 @@ | ||
```html | ||
<a id="ember240" class="ember-view" href="#/photos" data-toggle="dropdown" lang="es">Fotos</a> | ||
<input id="ember259" class="ember-view ember-text-field" | ||
type="text" data-toggle="tooltip" data-placement="bottom" title="Name"> | ||
<a id="ember239" class="ember-view" href="#/photos" data-toggle="dropdown" lang="es">Fotos</a> | ||
``` |
@@ -9,3 +9,7 @@ The Ember Data store provides an interface for retrieving records of a single type. | ||
```javascript | ||
let blogPost = this.get('store').findRecord('blog-post', 1); // => GET /blog-posts/1 | ||
// GET /blog-posts/1 | ||
this.get('store').findRecord('blog-post', 1) | ||
.then(function(blogPost) { | ||
// Do something with `blogPost` | ||
}); | ||
``` | ||
@@ -17,3 +21,4 @@ | ||
```javascript | ||
let blogPost = this.get('store').peekRecord('blog-post', 1); // => no network request | ||
// no network request | ||
let blogPost = this.get('store').peekRecord('blog-post', 1); | ||
``` | ||
@@ -26,3 +31,7 @@ | ||
```javascript | ||
let blogPosts = this.get('store').findAll('blog-post'); // => GET /blog-posts | ||
// GET /blog-posts | ||
this.get('store').findAll('blog-post') | ||
.then(function(blogPosts) { | ||
// Do something with `blogPosts` | ||
}); | ||
``` | ||
@@ -33,3 +42,4 @@ | ||
```javascript | ||
let blogPosts = this.get('store').peekAll('blog-post'); // => no network request | ||
// no network request | ||
let blogPosts = this.get('store').peekAll('blog-post'); | ||
``` | ||
@@ -36,0 +46,0 @@ |
@@ -43,3 +43,3 @@ In addition to normal text, you may also want to have your templates | ||
By default, helpers and components only accept a limited number of HTML attributes. | ||
By default, components only accept a limited number of HTML attributes. | ||
This means that some uncommon but perfectly valid attributes, such as `lang` or | ||
@@ -50,29 +50,23 @@ custom `data-*` attributes must be specifically enabled. For example, this template: | ||
{{#link-to "photos" data-toggle="dropdown" lang="es"}}Fotos{{/link-to}} | ||
{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}} | ||
``` | ||
renders the following HTML: | ||
Will render the following HTML: | ||
```html | ||
<a id="ember239" class="ember-view" href="#/photos">Fotos</a> | ||
<input id="ember257" class="ember-view ember-text-field" type="text" | ||
title="Name"> | ||
``` | ||
To enable support for these attributes an attribute binding must be | ||
added to the component, e.g. | ||
To enable support for these attributes, an attribute binding must be | ||
added for each specific attribute on the component. | ||
To do this, you can extend the appropriate components | ||
in your application. For example, for `link-to` you would create your own version | ||
of this component by extending | ||
[`Ember.LinkComponent`](https://www.emberjs.com/api/ember/release/classes/LinkComponent) | ||
or [`Ember.TextField`](https://www.emberjs.com/api/ember/release/classes/TextField) | ||
for the specific attribute: | ||
```javascript | ||
Ember.LinkComponent.reopen({ | ||
```javascript {data-filename="app/components/link-to/component.js"} | ||
import LinkComponent from '@ember/routing/link-component'; | ||
export default LinkComponent.extend({ | ||
attributeBindings: ['data-toggle', 'lang'] | ||
}); | ||
Ember.TextField.reopen({ | ||
attributeBindings: ['data-toggle', 'data-placement'] | ||
}); | ||
``` | ||
@@ -83,6 +77,3 @@ | ||
```html | ||
<a id="ember240" class="ember-view" href="#/photos" data-toggle="dropdown" lang="es">Fotos</a> | ||
<input id="ember259" class="ember-view ember-text-field" | ||
type="text" data-toggle="tooltip" data-placement="bottom" title="Name"> | ||
<a id="ember239" class="ember-view" href="#/photos" data-toggle="dropdown" lang="es">Fotos</a> | ||
``` |
@@ -315,3 +315,3 @@ As they search for a rental, users might also want to narrow their search to a specific city. | ||
test('should initially load all listings', function (assert) { | ||
test('should initially load all listings', async function (assert) { | ||
}); | ||
@@ -318,0 +318,0 @@ |
@@ -321,3 +321,3 @@ As a user looks through our list of rentals, they may want to have some interactive options to help them make a decision. | ||
```javascript {data-filename="tests/integration/components/rental-listing-test.js" data-diff="+3,+4"} | ||
test('should display rental details', function(assert) { | ||
test('should display rental details', async function(assert) { | ||
await render(hbs`{{rental-listing rental=rental}}`); | ||
@@ -324,0 +324,0 @@ assert.equal(this.$('.listing h3').text(), 'test-title', 'Title: test-title'); |
@@ -9,3 +9,7 @@ The Ember Data store provides an interface for retrieving records of a single type. | ||
```javascript | ||
let blogPost = this.get('store').findRecord('blog-post', 1); // => GET /blog-posts/1 | ||
// GET /blog-posts/1 | ||
this.get('store').findRecord('blog-post', 1) | ||
.then(function(blogPost) { | ||
// Do something with `blogPost` | ||
}); | ||
``` | ||
@@ -17,3 +21,4 @@ | ||
```javascript | ||
let blogPost = this.get('store').peekRecord('blog-post', 1); // => no network request | ||
// no network request | ||
let blogPost = this.get('store').peekRecord('blog-post', 1); | ||
``` | ||
@@ -26,3 +31,7 @@ | ||
```javascript | ||
let blogPosts = this.get('store').findAll('blog-post'); // => GET /blog-posts | ||
// GET /blog-posts | ||
this.get('store').findAll('blog-post') | ||
.then(function(blogPosts) { | ||
// Do something with `blogPosts` | ||
}); | ||
``` | ||
@@ -33,3 +42,4 @@ | ||
```javascript | ||
let blogPosts = this.get('store').peekAll('blog-post'); // => no network request | ||
// no network request | ||
let blogPosts = this.get('store').peekAll('blog-post'); | ||
``` | ||
@@ -36,0 +46,0 @@ |
@@ -43,3 +43,3 @@ In addition to normal text, you may also want to have your templates | ||
By default, helpers and components only accept a limited number of HTML attributes. | ||
By default, components only accept a limited number of HTML attributes. | ||
This means that some uncommon but perfectly valid attributes, such as `lang` or | ||
@@ -50,29 +50,23 @@ custom `data-*` attributes must be specifically enabled. For example, this template: | ||
{{#link-to "photos" data-toggle="dropdown" lang="es"}}Fotos{{/link-to}} | ||
{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}} | ||
``` | ||
renders the following HTML: | ||
Will render the following HTML: | ||
```html | ||
<a id="ember239" class="ember-view" href="#/photos">Fotos</a> | ||
<input id="ember257" class="ember-view ember-text-field" type="text" | ||
title="Name"> | ||
``` | ||
To enable support for these attributes an attribute binding must be | ||
added to the component, e.g. | ||
To enable support for these attributes, an attribute binding must be | ||
added for each specific attribute on the component. | ||
To do this, you can extend the appropriate components | ||
in your application. For example, for `link-to` you would create your own version | ||
of this component by extending | ||
[`Ember.LinkComponent`](https://www.emberjs.com/api/ember/release/classes/LinkComponent) | ||
or [`Ember.TextField`](https://www.emberjs.com/api/ember/release/classes/TextField) | ||
for the specific attribute: | ||
```javascript | ||
Ember.LinkComponent.reopen({ | ||
```javascript {data-filename="app/components/link-to/component.js"} | ||
import LinkComponent from '@ember/routing/link-component'; | ||
export default LinkComponent.extend({ | ||
attributeBindings: ['data-toggle', 'lang'] | ||
}); | ||
Ember.TextField.reopen({ | ||
attributeBindings: ['data-toggle', 'data-placement'] | ||
}); | ||
``` | ||
@@ -83,6 +77,3 @@ | ||
```html | ||
<a id="ember240" class="ember-view" href="#/photos" data-toggle="dropdown" lang="es">Fotos</a> | ||
<input id="ember259" class="ember-view ember-text-field" | ||
type="text" data-toggle="tooltip" data-placement="bottom" title="Name"> | ||
<a id="ember239" class="ember-view" href="#/photos" data-toggle="dropdown" lang="es">Fotos</a> | ||
``` |
@@ -315,3 +315,3 @@ As they search for a rental, users might also want to narrow their search to a specific city. | ||
test('should initially load all listings', function (assert) { | ||
test('should initially load all listings', async function (assert) { | ||
}); | ||
@@ -318,0 +318,0 @@ |
@@ -321,3 +321,3 @@ As a user looks through our list of rentals, they may want to have some interactive options to help them make a decision. | ||
```javascript {data-filename="tests/integration/components/rental-listing-test.js" data-diff="+3,+4"} | ||
test('should display rental details', function(assert) { | ||
test('should display rental details', async function(assert) { | ||
await render(hbs`{{rental-listing rental=rental}}`); | ||
@@ -324,0 +324,0 @@ assert.equal(this.element.querySelector('.listing h3').textContent.trim(), 'test-title', 'Title: test-title'); |
{ | ||
"name": "@ember-learn/guides-source", | ||
"version": "3.2.6", | ||
"version": "3.3.0", | ||
"description": "Markdown files for Ember-Guides", | ||
@@ -5,0 +5,0 @@ "homepage": "https://github.com/ember-learn/guides-source#readme", |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
39988335
1