Struggling with custom decorator working on bound component

1

On another project, we have a decorator that we use to set layout which leverages lifecyclehooks and load. On a new project, it’s simply show.binding components and as a result this isn’t working. I can’t seem to figure out what I need to do as an alternative. Any suggestions?

Here is basically what the other project is doing:

Decorator:

export function layout(layout: string) {
    return function(vm) {
        vm.prototype.layout = layout;

        return vm;
    }
}

Class file:

import { inject, lifecycleHooks } from "aurelia";

@lifecycleHooks()
@inject()
export class LayoutService {
    load(vm: any, params, next, current) {
        if(vm.layout) {
            document.body.setAttribute("layout", vm.layout);
        } else {
            document.body.removeAttribute("layout");
        }
    }
}

Which then can of course be called like:

@layout("mylayout")
export class MyApp {}

Since this new project isn’t leveraging a router, I thought I might be able to simply swap load for bound, but then realized lifecyclehooks is for router. Is there another way to do this?

2

not sure but you’re setting the layout property but accessing iqLayout

3

Sorry about that. I simplified the example down but missed a few. That’s not it, though. I can’t use load() and lifecyclehooks because there isn’t a router. Looking for something equivalent to lifecyclehooks for the component to do something like:

    bound(vm: any, params) {
        if(vm.layout) {
            document.body.setAttribute("layout", vm.layout);
        } else {
            document.body.removeAttribute("layout");
        }
    }