produce in the element that is invoked within an each function

Question

produce in the element that is invoked within an each function

This snippet is a key part of my component's template:

{{#each displayResults}}
  <li {{action addSelection this}} {{bindAttr class=\":result active\"}}>
  {{#if controller.template}}
    {{yield}}
  {{else}}
    <span class=\"result-name\">{{displayHelper controller.searchPath}}</span>
  {{/if}}
  <\/li>
{{/each}}

I am looking to give users the ability to personalize the HTML used for displaying results.

The issue arises when {{yield}} is called within an {{#each}} helper. For example, if the component is instantiated like this:

{{#auto-suggest source=controller.employees destination=controller.chosenEmployees}}
<span class=\"result-name\"><img src="img/small_avatar.png"/>{{fullName}}</span>
{{/auto-suggest}}

Then the content inside the {{#auto-suggest}} block does not have access to the context of the {{#each}} helper in the component.

Is there a workaround for this limitation, or is it simply the nature of the component?

javascript ember.js

Answer 1

Answer №1

UPDATE

With the release of ember 1.10, a new syntax known as block params was introduced. This eliminates the need to override the _yield method. For example, within your component's template:

<ul>
  {{#each item in source}}
    <li>
    {{! Using the component block form for yielding}}
    {{#if template.blockParams}}
      {{yield item}}
    {{else}}
      {{item}}
    {{/if}}
    </li>
  {{/each}}
</ul>

You can now pass parameters to {{yield}} using as |var|:

{{auto-suggest source=model as |item|}}

{{#auto-suggest source=model as |item|}}
  <h1>{{item}}</h1>
{{/auto-suggest}}

Here is a simple live example

You have the flexibility to yield any variables by using

{{yield name age occupation hobbies}}

and capturing them in the component like so:

{{#x-foo user=model as |name age occupation hobbies|}}
  Hi my name is {{name}}, I am {{age}} years old. Major of the times I am {{occupation}}, but also love to {{hobbies}}.
{{/x-foo}}

FOR OLD VERSIONS

If you are working with older versions, you can override the default _yield method of Ember.Component. Simply change

context: get(parentView, 'context')

to context: get(view, 'context').

App.AutoSuggestComponent = Ember.Component.extend({
  _yield: function(context, options) {      
    var get = Ember.get, 
    view = options.data.view,
    parentView = this._parentView,
    template = get(this, 'template');

    if (template) {
      Ember.assert("A Component must have a parent view in order to yield.", parentView);      
      view.appendChild(Ember.View, {
        isVirtual: true,
        tagName: '',
        _contextView: parentView,
        template: template,
        context: get(view, 'context'), // Change here from 'parentView' to 'view'
        controller: get(parentView, 'controller'),
        templateData: { keywords: parentView.cloneKeywords() }
      });
    }
  }
});

Answer 2

UPDATE

With the release of ember 1.10, a new syntax known as block params was introduced. This eliminates the need to override the _yield method. For example, within your component's template:

<ul>
  {{#each item in source}}
    <li>
    {{! Using the component block form for yielding}}
    {{#if template.blockParams}}
      {{yield item}}
    {{else}}
      {{item}}
    {{/if}}
    </li>
  {{/each}}
</ul>

You can now pass parameters to {{yield}} using as |var|:

{{auto-suggest source=model as |item|}}

{{#auto-suggest source=model as |item|}}
  <h1>{{item}}</h1>
{{/auto-suggest}}

Here is a simple live example

You have the flexibility to yield any variables by using

{{yield name age occupation hobbies}}

and capturing them in the component like so:

{{#x-foo user=model as |name age occupation hobbies|}}
  Hi my name is {{name}}, I am {{age}} years old. Major of the times I am {{occupation}}, but also love to {{hobbies}}.
{{/x-foo}}

FOR OLD VERSIONS

If you are working with older versions, you can override the default _yield method of Ember.Component. Simply change

context: get(parentView, 'context')

to context: get(view, 'context').

App.AutoSuggestComponent = Ember.Component.extend({
  _yield: function(context, options) {      
    var get = Ember.get, 
    view = options.data.view,
    parentView = this._parentView,
    template = get(this, 'template');

    if (template) {
      Ember.assert("A Component must have a parent view in order to yield.", parentView);      
      view.appendChild(Ember.View, {
        isVirtual: true,
        tagName: '',
        _contextView: parentView,
        template: template,
        context: get(view, 'context'), // Change here from 'parentView' to 'view'
        controller: get(parentView, 'controller'),
        templateData: { keywords: parentView.cloneKeywords() }
      });
    }
  }
});

Answer 3

Answer №2

Following Marcio Junior's advice, you have the option to enhance _yield without having to completely recreate the function. Instead of changing the behavior of _yield seamlessly, it is suggested to add an option to your component. For example:

 {{#whatever-component useComponentContext=true}}

In your component's JavaScript file, you can do the following:

 // Modifying _yield to utilize the current view
_yield: function(content, options) {
    var oldParentView = this._parentView;

    if (this.get('useComponentContext')) {
        // Temporarily set _parentView to the desired view
        this.set('_parentView', options.data.view);

        // Making the original context accessible through `_parent`
        options.data.view.get('context').set('_parent', oldParentView.get('context'));
    }

    // Call the default _yield method as usual
    var result = this._super.apply(this, arguments);

    // Restore _parentView
    this.set('_parentView', oldParentView);

    return result;
}

By implementing this approach, something like

{{!-- whatever-component.hbs --}}
{{#each something in somethings}}
  <div {{bind-attr title=something.id}}>
    {{#with something}}
      {{yield}}
    {{/with}}
  </div>
{{/each}}

{{!-- some-view.hbs --}}
{{#whatever-component.hbs}}
  <h1>{{id}}</h1>
  <p>{{someField}}</p>
  <div>{{_parent.theContextTheComponentIsBeingRenderedIn}}</div>
{{/whatever-component.hbs}}

will function as intended.

Answer 4

Following Marcio Junior's advice, you have the option to enhance _yield without having to completely recreate the function. Instead of changing the behavior of _yield seamlessly, it is suggested to add an option to your component. For example:

 {{#whatever-component useComponentContext=true}}

In your component's JavaScript file, you can do the following:

 // Modifying _yield to utilize the current view
_yield: function(content, options) {
    var oldParentView = this._parentView;

    if (this.get('useComponentContext')) {
        // Temporarily set _parentView to the desired view
        this.set('_parentView', options.data.view);

        // Making the original context accessible through `_parent`
        options.data.view.get('context').set('_parent', oldParentView.get('context'));
    }

    // Call the default _yield method as usual
    var result = this._super.apply(this, arguments);

    // Restore _parentView
    this.set('_parentView', oldParentView);

    return result;
}

By implementing this approach, something like

{{!-- whatever-component.hbs --}}
{{#each something in somethings}}
  <div {{bind-attr title=something.id}}>
    {{#with something}}
      {{yield}}
    {{/with}}
  </div>
{{/each}}

{{!-- some-view.hbs --}}
{{#whatever-component.hbs}}
  <h1>{{id}}</h1>
  <p>{{someField}}</p>
  <div>{{_parent.theContextTheComponentIsBeingRenderedIn}}</div>
{{/whatever-component.hbs}}

will function as intended.

produce in the element that is invoked within an each function

Answer №1

Answer №2

Similar questions

Sending the selected object from a dropdown in React back to its parent component

Can we incorporate various CSS libraries for individual components on our React site?

What is the best way to limit input to only numbers and special characters?

How to surround values and keys with double quotes using regular expressions in JavaScript

Having trouble setting up Node.js on a Mac computer

Scrolling to zoom in on the div content

Differences between Javascript object constructor and object literal

Implementing the useEffect hook in React to iterate over JSON data and update the state

What is causing the issue with $(document).append() method in jQuery version 1.9.1?

Unit testing an API built with Express and Mongoose using Jest

What is the best way to center text on an HTML canvas?

How can you generate a "Package Contains Lower Node Version" error message during the installation of an NPM package if the node version is higher than the current system's node version?

Unraveling functions from a JavaScript promise in a web application using ExpressJS and NeDB

Proper Structure for Node System (BASIC)

Issue with JQuery mobile: dynamically inserted popup fails to appear

The significance of using the Spread operator in React-Redux Reducers

Achieving a similar functionality to Spring Security ACL in a Node.js AWS Lambda serverless environment

Filtering MUI Data Grid by array elements

Encountering a Javascript error while trying to optimize bundling operations

How to perfect the alignment of TimePicker in angular UI