How to access parent data context programatically?

[rclai]

<template name="myComponent">
  {{#each quotes}}
    {{customer}} - {{quoteNumber}}
    {{#with quoteField}}
      {{!-- A bunch of nested field elements for `quoteField` --}}
      <button class="quote-field">Click</button>
    {{/with}}
  {{/each}}
</template>

BlazeComponent.extendComponent({
  events: function () {
    return [{
      'click .quote-field': function (event) {
        var quoteNumber = ??
        var quoteFieldNestedField = this.currentData().yay;
      }
    }]
  }
}).register('myComponent');

[mitar]

Yea, this is an experiment. I on purpose did not provide this feature because it gets complicated: it suffers from refactoring when you have to then change number of levels and things like that as you move your template around. So it links templates too much to the code in my opinion. So you have then to be careful to change both. Which is hard to maintain.

The proposed approach is that you make an internal content into a component.

<template name="myComponent">
  {{#each quotes}}
    {{> quoteComponent}}
  {{/each}}
</template>

<template name="quoteComponent">
  {{customer}} - {{quoteNumber}}
  {{#with quoteField}}
    {{!-- A bunch of nested field elements for `quoteField` --}}
    <button class="quote-field">Click</button>
  {{/with}}
</template>

BlazeComponent.extendComponent({
  events: function () {
    return [{
      'click .quote-field': function (event) {
        var quoteNumber = this.data().quoteNumber;
        var quoteFieldNestedField = this.currentData().yay;
      }
    }]
  }
}).register('quoteComponent');

[rclai]

I'm actually glad that it is built like this because it gives me a clear, no-brainer indication that I need to break out my component.

[mitar]

I am glad that you are confirming my intuition.