Aurelia compose - call a method from the composed view

1

Hello guys,
I have the following case:
In my component (let say options.html) view I have:

compose(view="./option-tabs/option-one.html", model.bind="dataModel")

in option-one view I have event handler, which I want to invoke a method from the parent model - validate(), but within the context of the parent.
Can this be done in some elegant way?

Somewhere in my options.js:

validate() {
    this.validation.validate();
  }

…where this needs to refer to the Options class

1 Like
2

As compose has no model, it lives in its enclosing view model thus the validate() method should be available to it.
If you mean that parents model you could inject it.
Or build a model that extends the parent model in order to have its methods available.

3

No methods from the parent are available in the composed view template. Only the model. That was the primary concern for posting this.

4

Maybe you can show us some code?

5

OK,
I have im my composed view:

template
  .container
    .row 
      .col-6
        form#options-form1.recalculate-options.pt-2(action="")
          .form-group
            h4.py-2 ${'common:cases.options.optionsList.optionsLabel' | t}
            
            .form-check(repeat.for="option of options")
              input.form-check-input(type="radio", name="recalculateOption", value="${$index}", id="calc-option-${$index}", checked.bind="recalculateModel.selectedOption")
              label.form-check-label.pl-2.pb-2(for="calc-option-${$index}") ${'management:cases.options.optionsList.' + option.name | t}
${'common:templateParameters.chooseOption' | t}
          .form-group 
            label(for="comment") ${'common:cases.actionComment' | t}
            textarea#comment.form-control(name="comment", rows="5", cols="50", 
            value.bind="dataModel.comment",
            maxlength=1024,
            text-counter="max-length.one-time:1024")
            a.link(href="javascript:void(0)", click.delegate="search(123)") ${'common:templateParameters.commentHelp' | t}

…and I’m my component view. where this is referred:

template
.....

  compose(view="./option-tabs/option-one.jade", model.two-way="dataModel")
....

and the component view model:

export class RecalculateAndEqualize {
  static options = [];
  keyword = '';

  dataModel = {
    comment: null,
    selectedOption: null
  };

  constructor(service, i18n, commonGridOptions) {
    this.service = service;
    this.i18n = i18n;
    this.data = [];
    const gridOptions = {...}
  }

  async activate() {
  }

  bind() {
  }

  unbind() {
  }

  async search(caseNumber) {
    try {
      this.data = await this.service.getCaseDetailsByCaseId(caseNumber);
      this.setGridData(this.data);
    } catch (error) {
      this.setGridData([]);
    }
  }
}

I hope this is pretty straight forward. I want search to get invoked from the view, which is composed within the component view.

6

Still hard to tell. I know though that Compose has less functionality than a Custom Component; that could be a problem. I think you’re using pug? as template language… that might cause it as well.
I’d try in a more standard way first, using custom component and html template.