CODEWITHSUNDEEP
aureliaaurelia-di
epitka
epitka

Reputation: 17637

What pattern is used to provide global configuration of custom elements or attributes in aurelia?

I know that one can export configure function and also register components as global resource. But what pattern do you use when your component provides "default" configuration that can be overridden? This needs to happen during configuration phase and needs to apply to all instances of the component. Do you use class with static members (typescript) or something else? Or, can I create instance of the config, set properties and add it to DI container somehow, so that all dependent components now get that instance?

import {PagingConfig} from "./PagingConfig";

export class PaginationConfig extends PagingConfig {

    boundaryLinks = false;
    boundaryLinkNumbers = false;
    directionLinks = true;
    rotate = true;
    forceEllipses = false;
    maxSize: number = null;
}

and here is my main.ts that configures. How do I override default configuration from above?

    import * as Promise from "bluebird";
    import {Aurelia} from "aurelia-framework";
    import {PaginationConfig} from "./components/shared/PaginationConfig";

    export function configure(aurelia: Aurelia):void {
      aurelia.use
            .standardConfiguration()
            .developmentLogging()
            .globalResources(["components/bar/InsightBarCustomElement",
                              "components/pagination/PaginationCustomAttribute"]);

Upvotes: 0

Views: 188

Answers (1)

epitka
epitka

Reputation: 17637

Solved this by reading a little bit this document https://github.com/aurelia/dependency-injection/blob/master/doc/article/en-US/dependency-injection-basics.md

Basically aurelia being injected into configuration has instance of container attached to it, so all I had to do is instantiate my config type, make changes and add it to the container. Something like this

import * as Promise from "bluebird";
import { PaginationConfig } from "./components/shared/PaginationConfig";
import { Aurelia } from "aurelia-framework";
import { Container } from "aurelia-dependency-injection";


export function configure(aurelia: Aurelia): void {
  function configurePaginationCustomAttribute(): void {

    let paginationConfig = new PaginationConfig();

    paginationConfig.firstText = "«";
    paginationConfig.previousText = "‹";
    paginationConfig.nextText = "›";
    paginationConfig.lastText = "»";

    aurelia.container.registerInstance(PaginationConfig,paginationConfig);
  }

  configurePaginationCustomAttribute();

  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .globalResources(["components/bar/InsightBarCustomElement",
      "components/pagination/PaginationCustomAttribute"]);

  let area: string = aurelia.host.getAttribute("data-area");

  console.log("Setting  aurelia root", area);

  aurelia.start().then(a => a.setRoot(area + "/app/app"));

}

Upvotes: 0

Related Questions