I am trying to implement dynamic composition in aurelia. More precisely I am creating tabs and for each new tab I am adding a new div and inside I am using compositionEngine.compose(...) to add the component corresponding to that tab. A working example can be found here: https://gist.run/?id=08a04dad8d94af01989d789a216195f3 . I am experiencing however some strange behaviour. For instance if I open the same component twice in 2 tabs it seems to reuse (share) the viewModel. Just open module 2 once, click change to increment the counter then open it again. It will show the previous value. Any ideas?
You could mark your view models with the transient decorator
import {transient} from 'aurelia-framework'
#transient()
export class M2 {
cnt = 1;
click(event){
this.cnt = this.cnt + 1;
}
}
Thank you James, you are right, in the mean time I understood the cause of my problem. The compositionEngine calls container.get(...) which of course returns a singleton of each class by default. Adding #transient() as you said makes the container return a new instance. What I still do not understand is how (where) does aurelia creates the model instance for other cases. I assume if the containers are indeed a tree that the model has to be registered using registerInstance in the child container (created after container.createChild())
Related
i used this.outletService.add('BottomHeaderSlot', factory, OutletPosition.BEFORE); during the search button click handler to add a custom component in the BottomHeaderSlot. I intended to add searchOverlay under the header to add customized search behavior.
But my custom component is not shown under the header after calling outletService.add. I refered to this https://sap.github.io/cloud-commerce-spartacus-storefront-docs/outlets/ . Does outletService support dynamic adding component during runtime?
Following is my button handler
open(): void {
const factory = this.componentFactoryResolver.resolveComponentFactory<SearchOverlayComponent>(SearchOverlayComponent);
this.outletService.add('BottomHeaderSlot', <any>factory, OutletPosition.BEFORE);
this.cd.markForCheck();
That's a good question. At the moment it is a not a feature supported from our outlets.
A solution you could do is inject the component in a more static manner (either CMS or outlet when the app initializes like seen here https://github.com/SAP/cloud-commerce-spartacus-storefront/blob/develop/projects/storefrontlib/src/cms-components/asm/services/asm-enabler.service.ts)?
Your component could then be wrapped with an <ng-container *ngIf="open$ | async></ng-container> where open$ is an observable for the state of the search box. That way the component only appears in the dom when the searchbox is open.
The idea of dynamically adding a components through outlets is a good one we will keep in mind. I will open an issue on Github as an improvement.
I have an Aurelia app where a user can click on a button and create a new tab. The tab and its content (a custom element) do not exist on the page before the user clicks the button. I am generating the HTML for the content at runtime (via Javascript) in my view model.
I keep seeing mention of using the template engine's compose or enhance functions, but neither are working for me. I don't know how I would use the <compose> element (in my HTML) since I am creating the element based on the user clicking a button.
My thought was that the button has a click.delegate to a function that does ultimately does something like
const customElement = document.createElement('custom-element');
parentElement.appendChild(customElement);
const view = this.templatingEngine.enhance({
element : customElement,
container : this.container, // injected
resources : this.viewResources, // injected
bindingContext: {
attrOne: this.foo,
attrTwo: this.bar,
}
});
view.attached();
But all this does is create an HTML element <custom-element></custom-element> without actually binding any attributes to it.
How can I create a custom element analogous to <custom-element attr-one.bind="foo" attr-two.bind="bar"></custom-element> but via Javascript?
As you pointed out in your own answer, it's the missing resources that caused the issue. One solution is to register it globally. That is not always the desired behavior though, as sometimes you want to lazily load the resources and enhance some lazy piece of HTML. Enhance API accepts an option for the resources that you want to compile the view with. So you can do this:
.enhance({
resources: new ViewResources(myGlobalResources) // alter the view resources here
})
for the view resources, if you want to get it from a particular custom element, you can hook into the created lifecycle and get it, or you can inject the container and retrieve it via container.get(ViewResources)
I found the problem =\ I had to make my custom element a global resource.
Hi there I have asked this on Gitter, but hope that someone here may be able to help.
I have two different routes that have the same moduleId. I have also set up a setting object within the routes with some data to differentiate what gets rendered. Everything works fine when I navigate to one of these routes from somewhere else, but if I navigate from one to the other neither the constructor or the activate are fired. am i missing something??
I had this problem and it took me a while to find a solution - this should help you I hope;
You need to add the determineActivationStrategy() method into your class, and then return as below.
import {activationStrategy} from "aurelia-router";
export class ExampleViewModel {
determineActivationStrategy() {
return activationStrategy.replace;
}
}
This will force the VM to be replaced when you're routing to it from itself.
Here's some more info on the different Activation Strategy types;
activationStrategy.no-change – reuse instance with no lifecycle events
activationStrategy.invokeLifecycle – call lifecycle methods on the ViewModel instance each time the route switches
activationStrategy.replace – construct new instance of ViewModel and invoke full lifecycle on it
Taken from here ZombieCodeKill - Aurelia Routing Beyond the Basics
Found the answer here :) Although not a complete fix out of the box, the implementation is possible
I started to use GWTP for my project and I'm currently re-writing all my code to let it work with this library.
However, I struggle to understand how I use GWTP if I want e.g. a ListView with ListItemView items.
#Inject
public ToolsPresenter(PlaceManager placeManager, EventBus eventBus, MyView view, MyProxy proxy) {
super(eventBus, view, proxy, AdminToolPresenter.SLOT_AdminToolMainContent);
this.placeManager = placeManager;
ToolListView toolListView = new ToolListView(...)
ToolListPresenter toolListPresenter = new ToolListPresenter(....);
this.setInSlot(SLOT_ToolList, toolListPresenter);
}
What I want is to place my ListView inside a slot. I am very certain that I can't do what is shown up there but I just don't get how I use just simple Widgets with GWTP.
Or am I doing this completely wrong and I should just extend a Composite for ListView and not use GWTP stuff here at all?
There is a lot of information missing from your question so this is a difficult one to answer.
Assumption 1 - Your GWTP artifacts (ToolListView, ToolListPresenter, ToolListView.ui.xml, and ToolListModule) are setup correctly and ToolListModule is installed in a parent module.
Assumption 2 - You are using GWTP version 1.5+ which has typed slots.
You should not be instantiating your ToolListView or ToolListPresenter.
Simply add:
#Inject ToolListPresenter toolListPresenter;
If you are trying to call the setInSlot method then
Make sure ToolListPresenter is a PresenterWidget
Make sure your slot is not a NestedSlot.
Finally try moving the call to setInSlot outside of your constructor and into the overridden onBind() method.
I have a component I created that extends Ext.window.Window, I've given it an alias of 'widget.customereditor'. Once I've created an shown an instance of this component both of the following pieces of code seem to be getting a reference to the same thing:
Ext.ComponentQuery.query('customereditor')[0];
Ext.widget('customereditor');
The problem is when I try to execute the close method on the returned object. So the following does work and closes the window:
Ext.ComponentQuery.query('customereditor')[0].close();
While this does not work:
Ext.widget('customereditor').close();
I'm wondering what the difference is between the two ways of querying?
After reading the API docs I found the answer. It turns out that Ext.widget does not actually query for an existing instance of a component in the DOM but instead creates new instances of components by their xtype. Ext.ComponentQuery should be used to find existing instances of components.