Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE ember-views-component-block-info] #10461

Merged
merged 1 commit into from
Feb 15, 2015
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
77 changes: 77 additions & 0 deletions FEATURES.md
Original file line number Diff line number Diff line change
Expand Up @@ -215,3 +215,80 @@ for a detailed explanation.
```

Added in [#10274](https://github.com/emberjs/ember.js/pull/10274)

* `ember-views-component-block-info`

Adds a couple utility methods to detect block/block param presence:

* `hasBlock`

Adds the ability to easily detect if a component was invoked with or
without a block.

Example (`hasBlock` will be `false`):

```hbs
{{! templates/application.hbs }}

{{foo-bar}}

{{! templates/components/foo-bar.js }}
{{#if hasBlock}}
This will not be printed, because no block was provided
{{/if}}
```

Example (`hasBlock` will be `true`):

```hbs
{{! templates/application.hbs }}

{{#foo-bar}}
Hi!
{{/foo-bar}}

{{! templates/components/foo-bar.js }}
{{#if hasBlock}}
This will be printed because a block was provided
{{yield}}
{{/if}}
```

* `hasBlockParams`

Adds the ability to easily detect if a component was invoked with block parameter
supplied.

Example (`hasBlockParams` will be `false`):

```hbs
{{! templates/application.hbs }}

{{#foo-bar}}
Hi!.
{{/foo-bar}}

{{! templates/components/foo-bar.js }}
{{#if hasBlockParams}}
{{yield this}}
This will not be printed, because no block was provided
{{/if}}
```

Example (`hasBlockParams` will be `true`):

```hbs
{{! templates/application.hbs }}

{{#foo-bar as |foo|}}
Hi!
{{/foo-bar}}

{{! templates/components/foo-bar.js }}
{{#if hasBlockParams}}
{{yield this}}
This will be printed because a block was provided
{{/if}}
```

Addd in [#10461](https://github.com/emberjs/ember.js/pull/10461)
3 changes: 2 additions & 1 deletion features.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
"ember-application-instance-initializers": null,
"ember-application-initializer-context": null,
"ember-router-willtransition": true,
"ember-application-visit": null
"ember-application-visit": null,
"ember-views-component-block-info": null
},
"debugStatements": [
"Ember.warn",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,3 +84,65 @@ QUnit.test('block with properties', function() {

equal(jQuery('#qunit-fixture').text(), 'In layout - someProp: something here - In template');
});

if (Ember.FEATURES.isEnabled('ember-views-component-block-info')) {
QUnit.test('`Component.prototype.hasBlock` when block supplied', function() {
expect(1);

registry.register('template:components/with-block', compile('{{#if hasBlock}}{{yield}}{{else}}No Block!{{/if}}'));

view = EmberView.extend({
template: compile('{{#with-block}}In template{{/with-block}}'),
container: container
}).create();

runAppend(view);

equal(jQuery('#qunit-fixture').text(), 'In template');
});

QUnit.test('`Component.prototype.hasBlock` when no block supplied', function() {
expect(1);

registry.register('template:components/with-block', compile('{{#if hasBlock}}{{yield}}{{else}}No Block!{{/if}}'));

view = EmberView.extend({
template: compile('{{with-block}}'),
container: container
}).create();

runAppend(view);

equal(jQuery('#qunit-fixture').text(), 'No Block!');
});

QUnit.test('`Component.prototype.hasBlockParams` when block param supplied', function() {
expect(1);

registry.register('template:components/with-block', compile('{{#if hasBlockParams}}{{yield this}} - In Component{{else}}{{yield}} No Block!{{/if}}'));

view = EmberView.extend({
template: compile('{{#with-block as |something|}}In template{{/with-block}}'),
container: container
}).create();

runAppend(view);

equal(jQuery('#qunit-fixture').text(), 'In template - In Component');
});

QUnit.test('`Component.prototype.hasBlockParams` when no block param supplied', function() {
expect(1);

registry.register('template:components/with-block', compile('{{#if hasBlockParams}}{{yield this}}{{else}}{{yield}} No Block Param!{{/if}}'));

view = EmberView.extend({
template: compile('{{#with-block}}In block{{/with-block}}'),
container: container
}).create();

runAppend(view);

equal(jQuery('#qunit-fixture').text(), 'In block No Block Param!');
});
}
83 changes: 83 additions & 0 deletions packages/ember-views/lib/views/component.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { set } from "ember-metal/property_set";
import isNone from 'ember-metal/is_none';

import { computed } from "ember-metal/computed";
import { bool } from "ember-metal/computed_macros";
import defaultComponentLayout from "ember-htmlbars/templates/component";

var a_slice = Array.prototype.slice;
Expand Down Expand Up @@ -324,4 +325,86 @@ var Component = View.extend(TargetActionSupport, ComponentTemplateDeprecation, {
}
});

if (Ember.FEATURES.isEnabled('ember-views-component-block-info')) {
Component.reopen({
/**
Returns true when the component was invoked with a block template.

Example (`hasBlock` will be `false`):

```hbs
{{! templates/application.hbs }}

{{foo-bar}}

{{! templates/components/foo-bar.js }}
{{#if hasBlock}}
This will not be printed, because no block was provided
{{/if}}
```

Example (`hasBlock` will be `true`):

```hbs
{{! templates/application.hbs }}

{{#foo-bar}}
Hi!
{{/foo-bar}}

{{! templates/components/foo-bar.js }}
{{#if hasBlock}}
This will be printed because a block was provided
{{yield}}
{{/if}}
```
@public
@property hasBlock
@returns Boolean
*/
hasBlock: bool('template'),

/**
Returns true when the component was invoked with a block parameter
supplied.

Example (`hasBlockParams` will be `false`):

```hbs
{{! templates/application.hbs }}

{{#foo-bar}}
No block parameter.
{{/foo-bar}}

{{! templates/components/foo-bar.js }}
{{#if hasBlockParams}}
This will not be printed, because no block was provided
{{yield this}}
{{/if}}
```

Example (`hasBlockParams` will be `true`):

```hbs
{{! templates/application.hbs }}

{{#foo-bar as |foo|}}
Hi!
{{/foo-bar}}

{{! templates/components/foo-bar.js }}
{{#if hasBlockParams}}
This will be printed because a block was provided
{{yield this}}
{{/if}}
```
@public
@property hasBlockParams
@returns Boolean
*/
hasBlockParams: bool('template.blockParams')
});
}

export default Component;
21 changes: 21 additions & 0 deletions packages/ember-views/tests/views/component_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -244,3 +244,24 @@ QUnit.test('component with target', function() {

appComponent.send('foo', 'baz');
});

if (Ember.FEATURES.isEnabled('ember-views-component-has-block')) {
QUnit.test('component with a template will report hasBlock: true', function() {
expect(1);

var appComponent = Component.create({
template: 'some-thing-yolo'
});

equal(get(appComponent, 'hasBlock'), true);
});

QUnit.test('component without a template will report hasBlock: false', function() {
expect(1);

var appComponent = Component.create({
});

equal(get(appComponent, 'hasBlock'), false);
});
}