Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ember-learn/guides-source

Package Overview
Dependencies
Maintainers
6
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ember-learn/guides-source - npm Package Compare versions

Comparing version 3.2.6 to 3.3.0

33

guides/v3.1.0/templates/binding-element-attributes.md

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc