Adding, appending to a dom element using custom element

Help Requests
1

I am struggling with this being a beginner…

I have created a custom element that injects Element as so:

@inject(Element)
export class CalendarCustomElement {
    private today: moment.Moment;

    @bindable currentDate: Date;

    private element: Element

    constructor(private Element: Element) {
        this.today = moment();
        this.currentDate = this.today.toDate();
        this.element = Element;

}

If I have a list say:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

or an array…

or even a string…

How do I add this to the element in attached()? (I assume this is where you create the element)

Regards Simon

1 Like
2

Simon - you are thinking like it is jQuery where you are doing DOM manipulation.

If you created an element (I believe you need to include the @customElement above your class can you refer to it like so

<calendar-custom-element current-date.bind="someDateObjectInViewModel"></calendar-custom-element>

The injected Element represents THAT element that was created in the page.

You would also need to have the approrpriate <require> tag defined in your file. Take a look at the tutorial in the fundementals
https://aurelia.io/docs/fundamentals/creating-components

Regards

Jason

1 Like
3

Still confused about this… Let me explain what I want to do…

I can and have already added custom elements to a parent element.

One of those is elements is a calendar layout with say three day columns and hours say from 8.00am to 5.00pm with each hour broken into either 2 (half hour) or 4 (quarter hour).

What I want to do is create this on the fly based on options passed into the parent container like say how many hours and is it split into quarter or half hour intervals and show accordingly.

So what I wanted to do was create this via typescript. You know… if its 8am to 7am then display that many hours etc.

How would you build this via custom elements but in the VM and not in the view… eg use a loop to simply spin out the number of boxes based on the options… is there an easy way… I am open to suggestions…

Unless there is a better way to add elements via the view model directly this is what was able to come up with… happy for someone to suggest another more aurelia way etc.

import { bindable, View, inject, bindingMode, autoinject, DOM, TemplatingEngine } from 'aurelia-framework';
import * as moment from 'moment';
//import * as $ from 'jQuery';

@inject(Element, TemplatingEngine, DOM)
export class CalendarCustomElement {
    private today: moment.Moment;
    childView: any;

    @bindable currentDate: Date;

    private element: Element
    private templatingEngine: TemplatingEngine;

    constructor(private Element: Element, private TemplatingEngine: TemplatingEngine) {
        this.today = moment();
        this.currentDate = this.today.toDate();
        this.element = Element;
        this.templatingEngine = TemplatingEngine;
  }



  attached() {
      let childElement = DOM.createElement('div');
      let anotherElement = DOM.createElement('span');
      anotherElement.setAttribute('class', 'cal-header');
      childElement.appendChild(anotherElement);

      this.element.appendChild(childElement);

  }

  detached() {
    console.log({ event: 'detached: Calender', this: this });
  }

  unbind() {
    console.log({ event: 'unbind: Calender', this: this });
  }

}

This was a test to add elements to this element via the VM… what I aim to do is use a for loop and create the individual cells - divs or custom elements depending on the options given… is there a better way to add these via the VM?

Regards
Simon

1 Like
4

I think you’re going to want to use templating repeaters.

Highly recommended: Beginning Aurelia

1 Like