Skip to content

[Bug] {{if @content}} breaks parent reference in conditionals when using "within" #598

@ericyhwang

Description

@ericyhwang

Short summary: When using within with custom content that has {{if parent.method()}}, the parent reference is wrong when the inner component surrounds the content usage with {{if @content}}. The parent reference incorrectly resolves to the inner component under those two exact conditions, when it should resolve to the outer component.

I wrote failing test cases in Derby that demonstrate this bug, on the branch bug-within-if-content-parent:
b4f45da


Say you have a picture-frame component that allows the inclusion of custom {{content}}. When using picture-frame from another component, say showcase, the default is that the "passed-in" custom content uses the context of showcase, where the custom content is declared.

It is possible to use the within attribute to have the custom content use the context internal to picture-frame, instead of the default of showcase. If the custom content also needs to use controller methods from the outer showcase, it can refer to them by {{parent.method()}}.

That all works fine, but there is a bug when both these are true:

  1. The custom content uses a {{if parent.method()}} binding.
    • The text binding{{parent.method()}} works regardless of the second point.
  2. picture-frame surrounds the content with {{if @content}} {{content}} {{/if}}.
    • {{if content}} (model path instead of attribute path) allows the first point to work fine.

Full example below.

showcase.html:

<index:>
<view is="picture-frame" within>
  {{frameInternalPath}}
  <!-- This works fine in both cases -->
  {{parent.showcaseName()}}
  <!-- This breaks when picture-frame uses {{if @content}} -->
  {{if parent.showcaseName()}} Uh oh! {{/if}}
</view>

showcase.js:

class Showcase {
  showcaseName() { return 'The Showcase'; }
}

picture-frame.html:

<index:>
{{if @content}}
  {{content}}
{{/if}}

picture-frame.js:

class PictureFrame {
  init() {
    this.model.set('frameInternalPath', 'Hello');
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions