ractivejs / ractive

Next-generation DOM manipulation
http://ractive.js.org
MIT License
5.94k stars 396 forks source link

yield directive doesn't work with alias of dynamic values #3316

Closed marcalexiei closed 5 years ago

marcalexiei commented 5 years ago

Description:

It seems that yield directive with both context and aliases, introduced in Ractive 1.3.0

Partials with context can now also supply aliases, which is useful for transplanting template supplied to a different component using the context object context support from 1.1.0 e.g. {{>.content .context, true as remote, some.thing as item}} where the .content template will have access to remote and item from the caller's context.

is not working when passing a reference value: {{yield examplePartial with ., foo as param}}

If value is static: {{yield examplePartial with ., 'bar' as param}}

everything works correctly.

Versions affected:

Platforms affected:

All. Tested on Chrome and Safari

Reproduction:

  1. Open this fiddle
  2. In "yield dynamic" section param value is not present. It should be set to bar
Ractive.components.MyComponent = Ractive.extend({
  template: `
  <h2>yield dynamic</h2>
  {{yield examplePartial with ., foo as param}}

    <h2>yield static</h2>
  {{yield examplePartial with ., 'bar' as param}}

    <h2>normal partial</h2>
    {{>examplePartial ., foo as param}}
  `,

  partials: {
    examplePartial: `
    <h5>Example partial</h5>
    this is set to {{JSON.stringify(.)}}
    Param value: {{param}}
    `,
  },

  data() {
    return {
      foo: 'bar',
    };
  },
});

const r = window.r = new Ractive({
  el: '#main',
  template: '<MyComponent/>',
  data: {},
});
marcalexiei commented 5 years ago

Another related issue occurs when dynamic value is the output of a function:

{{yield examplePartial with ., something() as param}}

  1. Open this fiddle
  2. Open console
  3. Run

You should see a Failed to compute @something(): _0 is not a function error

evs-chris commented 5 years ago

That was an interesting trip. Contexted partials get an implicit {{#with}} section nested around their content, including any aliases. The surrounding partial also has the aliases, so in the case of a non-yield, it works correctly. In the case of a yield, there's already a different context around the {{#with}} due to the yield, so the inner aliases couldn't resolve. The simple solution was not to duplicate the aliases to the inner context when the partial is a yield. This should now be fixed on edge, and I'll push it out to 1.2 and 1.3 in a bit. Thanks for the report!