Accessing the ViewModel property of a parent component from the ViewModel of its child in Aurelia

Question

Accessing the ViewModel property of a parent component from the ViewModel of its child in Aurelia

Having a scenario with two distinct components:

<parent-component type="permanent">
    <div child-component></div>
</parent-component>

class ParentComponentCustomElement {
    @bindable public type: string = "permanent";
}

class ChildComponentCustomAttribute {
    public attached() {
        // How exactly can I access the instance of ParentComponentCustomElement from here?
    }
}

The main goal is to retrieve the value of the type property in the parent component so that we can dynamically apply classes to the child component based on certain conditions.

I have considered traversing through the DOM tree to find the specific parent component, but I believe there must be a better approach to achieve this.

javascript typescript aurelia

Answer 1

Answer №1

If you haven't already, consider implementing the bind() method for your custom attribute. Here's a simple example to get you started:

bind(bindingContext, overrideContext) {
  console.log(overrideContext.parentOverrideContext.bindingContext.somePropertyFromParentViewModel);
}

See more at:

Answer 2

If you haven't already, consider implementing the bind() method for your custom attribute. Here's a simple example to get you started:

bind(bindingContext, overrideContext) {
  console.log(overrideContext.parentOverrideContext.bindingContext.somePropertyFromParentViewModel);
}

See more at:

Answer 3

Answer №2

I discovered a simple way to access the parent ViewModel from the child component by using @inject like so:

import {inject, Parent} from 'aurelia-framework';

class ParentComponentCustomElement {
    public type: string = "permanent";
}

@inject(Parent.of(ParentComponentCustomElement))
class ChildComponentCustomAttribute {

    public constructor(private parent: ParentComponentCustomElement) {}

    public attached() {
        console.log(this.parent.type); // permanent
    }
}

This method not only allows easy access to the parent ViewModel, but it also navigates through the parent tree until it locates the desired component. This means the child component can be wrapped in a different component and still function correctly.

Answer 4

I discovered a simple way to access the parent ViewModel from the child component by using @inject like so:

import {inject, Parent} from 'aurelia-framework';

class ParentComponentCustomElement {
    public type: string = "permanent";
}

@inject(Parent.of(ParentComponentCustomElement))
class ChildComponentCustomAttribute {

    public constructor(private parent: ParentComponentCustomElement) {}

    public attached() {
        console.log(this.parent.type); // permanent
    }
}

This method not only allows easy access to the parent ViewModel, but it also navigates through the parent tree until it locates the desired component. This means the child component can be wrapped in a different component and still function correctly.

Accessing the ViewModel property of a parent component from the ViewModel of its child in Aurelia

Answer №1

Answer №2

Similar questions

Tips for efficiently importing a file or folder that is valuable but not currently in use

TS2307 error encountered in Angular 2 TypeScript due to the inability to locate a module for a private npm

Combine two elements together and display the outcome in json form

Exploring AngularJS and Jasmine: Testing a controller function that interacts with a service via $http

Utilize CSS in your HTML using Express framework

Discovering the method to extract a specific section from a lengthy string

What are all the different methods I can use to transfer element A to element B, and what are those methods?

Exploring Material UI: Customizing the styling of components within TablePagination

The specified JSX element does no possess any constructors or callable signatures

Tips for effectively utilizing an if/else structure to animate fresh content from the right while smoothly removing old content by sliding it to the left

What is causing the slow performance of this JavaScript array retrieval?

Create a nested array of subcategories within an array object

How do you eliminate row highlighting on the <TableRow> component within Material-UI's <Table> using ReactJS?

Instructions on creating a Superfish menu with a vertical layout in the first level and a horizontal layout in the second level

Turning backbone's collection toJSON method into a collection object

Exploring Parquet Files with Node.js

Using Protractor to extract text from multiple paragraphs

JavaScript is throwing an error related to 'typeError' even after explicitly converting to a string

Is the promises functionality respected by the Nextjs API?

How to fix jQuery animate queue issue so animations run at the same time