Create personalized components in your view using Aurelia's dynamic generation feature

Question

Create personalized components in your view using Aurelia's dynamic generation feature

I am currently in the process of developing a web application for a board game and have opted to utilize the Aurelia JavaScript framework for the front-end. While I am new to Aurelia, I encountered an obstacle when attempting to create a new instance of a custom component with just the click of a button. To provide further clarity on my issue, let me illustrate what I aim to achieve using an example. The configuration for the game project I want to execute is as shown:

Game Configuration Image

To shed more light on the problem I am facing, I have prepared a basic example. This challenge mainly roots from my unfamiliarity with Aurelia rather than any other factor. In this simplistic demonstration, I have the main app.js viewmodel and app.html view that Aurelia recognizes as the primary viewmodel and view respectively. They are structured as follows:

app.js

import { Card } from './card';

export class App {
    cards = [];

    newCard() {
        this.cards.push(new Card());
    }
}

app.html

<template>
    <require from="./card"></require>

    <button click.delegate="newCard()">New Card</button>

    <div>
        <li repeat.for="card of cards">
            <compose view-model="card"></compose>
        </li>
    </div>
</template>

Moreover, there exists a card component that simply represents a playing card. Below are its viewmodel and view:

card.js

export class Card {
    cardValues = ['2','3','4','5','6','7','8','9','10',
        'J','Q','K','A'];
    cardSuits = ['Diamonds', 'Clubs', 'Hearts', 'Spades'];

    value;
    suit;

    activate() {
        this.value = this.pickRandomItem(this.cardValues);
        this.suit = this.pickRandomItem(this.cardSuits);
    }

    pickRandomItem(data) {
        let index = Math.floor(Math.random() * (data.length -1));
        return data[index];
    }
}

card.html

<template>
    <div style="border: 2px solid black;
                display: inline-block;
                margin-top: 10px;">
        <h3>Value: ${value}</h3>
        <h4>Suit: ${suit}</h4>
    </div>
</template>

At present, I can generate new cards dynamically by clicking the button in the app view, triggering the instantiation of a new Card object in the app viewmodel's button click event handler. However, my concern lies in manually instantiating the Card objects from the app viewmodel. It seems like there should be a way to instruct Aurelia to create a new Card object, but I have not grasped how to achieve that yet. Therefore, my query is: Is there a more efficient method to dynamically produce custom components without the need to manually instantiate them as I am currently doing?

I find this approach incorrect because with the current structure, the constructor for a Card object is called twice instead of once. Additionally, if the Card class necessitates injected dependencies, I would have to pass those into the new Card objects manually, which feels cumbersome.

Thank you tremendously for your assistance!

You can access the minimal functional repository through this link on GitHub

javascript mvvm typescript aurelia

Answer 1

Answer №1

The solution may involve utilizing the model property within the compose element. By using the model property, you can pass an object of values to be utilized in your view model. These values are accessible in the activate method as the first argument.

To implement this, follow these steps:

<li repeat.for="cardObj of cards">
    <compose view-model="card" model.bind="cardObj"></compose>
</li>

By following this approach, the card viewmodel remains intact while moving the generation logic out and passing the card object from the cards array. This results in a cleaner and simpler process, avoiding the instantiation of heavy objects repeatedly.

In your app.js file, creating a new object triggers the constructor each time due to the new keyword. Consequently, when the compose element calls it, the object is instantiated again, resulting in double instantiation.

Rather than using new Card(), you should push a simple object into your cards array. Move the card generation logic to a class that isn't instantiated multiple times.

Edit

After receiving additional feedback, here's an example of how everything could fall into place. The card creation logic has been moved into a function. This function generates an object with two properties: suit and value. This object is then passed to the compose element as data and utilized accordingly.

app.js

export class App {
    cards = [];

    newCard() {
        this.cards.push(generateCard());
    }
}

function generateCard() {
    let cardValues = ['2','3','4','5','6','7','8','9','10',
        'J','Q','K','A'];

    let cardSuits = ['Diamonds', 'Clubs', 'Hearts', 'Spades'];

    function pickRandomItem(arr) {
        let index = Math.floor(Math.random() * (arr.length -1));
        return arr[index];
    }

    return {
        suit: pickRandomItem(cardSuits),
        value: pickRandomItem(cardValues)
    };
}

app.html

<template>
    <button click.delegate="newCard()">New Card</button>

    <div>
        <li repeat.for="cardObj of cards">
            <!-- cardObj will be our object {suit: 'suit', value: 'value'} -->
            <compose view-model="card" model.bind="cardObj"></compose>
        </li>
    </div>
</template>

card.js

export class Card {
    suit;
    value;

    activate(model) {
        if (model) {
            this.suit = model.suit;
            this.value = model.value;
        }
    }
}

Your card.html file will remain unaffected.

Answer 2

The solution may involve utilizing the model property within the compose element. By using the model property, you can pass an object of values to be utilized in your view model. These values are accessible in the activate method as the first argument.

To implement this, follow these steps:

<li repeat.for="cardObj of cards">
    <compose view-model="card" model.bind="cardObj"></compose>
</li>

By following this approach, the card viewmodel remains intact while moving the generation logic out and passing the card object from the cards array. This results in a cleaner and simpler process, avoiding the instantiation of heavy objects repeatedly.

In your app.js file, creating a new object triggers the constructor each time due to the new keyword. Consequently, when the compose element calls it, the object is instantiated again, resulting in double instantiation.

Rather than using new Card(), you should push a simple object into your cards array. Move the card generation logic to a class that isn't instantiated multiple times.

Edit

After receiving additional feedback, here's an example of how everything could fall into place. The card creation logic has been moved into a function. This function generates an object with two properties: suit and value. This object is then passed to the compose element as data and utilized accordingly.

app.js

export class App {
    cards = [];

    newCard() {
        this.cards.push(generateCard());
    }
}

function generateCard() {
    let cardValues = ['2','3','4','5','6','7','8','9','10',
        'J','Q','K','A'];

    let cardSuits = ['Diamonds', 'Clubs', 'Hearts', 'Spades'];

    function pickRandomItem(arr) {
        let index = Math.floor(Math.random() * (arr.length -1));
        return arr[index];
    }

    return {
        suit: pickRandomItem(cardSuits),
        value: pickRandomItem(cardValues)
    };
}

app.html

<template>
    <button click.delegate="newCard()">New Card</button>

    <div>
        <li repeat.for="cardObj of cards">
            <!-- cardObj will be our object {suit: 'suit', value: 'value'} -->
            <compose view-model="card" model.bind="cardObj"></compose>
        </li>
    </div>
</template>

card.js

export class Card {
    suit;
    value;

    activate(model) {
        if (model) {
            this.suit = model.suit;
            this.value = model.value;
        }
    }
}

Your card.html file will remain unaffected.

Answer 3

Answer №2

One alternative method is to designate the Card class as transient and implement the Lazy resolver. Please forgive my use of ES6.

MainApp.js

import { Card } from './card';
import {Lazy,inject} from 'aurelia-framework';

@inject(Lazy.of(Card))
export class MainApp {
    constructor(cardCreator){
        this.cardCreator = cardCreator;
    }
    allCards = [];

    createNewCard() {
        this.allCards.push(this.cardCreator());
   }
}

Card.js

import {transient} from 'aurelia-framework';
@transient()
export class Card {
    //perform actions
}

Answer 4

One alternative method is to designate the Card class as transient and implement the Lazy resolver. Please forgive my use of ES6.

MainApp.js

import { Card } from './card';
import {Lazy,inject} from 'aurelia-framework';

@inject(Lazy.of(Card))
export class MainApp {
    constructor(cardCreator){
        this.cardCreator = cardCreator;
    }
    allCards = [];

    createNewCard() {
        this.allCards.push(this.cardCreator());
   }
}

Card.js

import {transient} from 'aurelia-framework';
@transient()
export class Card {
    //perform actions
}

Create personalized components in your view using Aurelia's dynamic generation feature

Answer №1

Edit

Answer №2

Similar questions

Use the JavaScript executor to combine a dynamic string

Dynamic element substitution

Error message: "Issue encountered with locating Node import module while operating within a docker

Executing multiple XMLHTTP requests within a Bootstrap Modal

Activate Keyboard and Background in the Bootstrap Modal

React Native has encountered an issue with an undefined object, resulting in an error

Modifying worldwide variables within an ajax request

Erase the Japanese content from the input

Tips on incorporating toggle css classes on an element with a click event?

Tips for altering the currently active tab in a separate window using a browser extension?

Is it best to remove trailing/leading whitespace from user input before insertion into the database or during the input process?

I aim to showcase div elements based on the specific Props value

Modifying various items depending on the variable's value

Guidelines for Optimizing NPM Packages: Maximizing Efficiency and Providing Multiple Import Routes

The message appearing on my screen reads: "Attempting to read properties of an undefined value, specifically 'map'."

Obtain navigation instructions from current location to destination when marker is selected

Tips for updating the text of an HTML element without deleting its children using JavaScript

What is the best way to use AJAX to load a PHP file as a part

Eliminate items/attributes that include a certain term

Change the data-theme using jQuery Mobile once the page has finished loading