I am using Aurelia's Custom Elements to repeat over a set of entries. Here is the sample gist: https://gist.run/?id=38aee854447122f021bc05e1e0de25ae
Now, I need to access the deleteEntry(entry) method when clicked on the button defined in custom element. I tried using $parent.deleteEntry(entry) but it's not working.
Saw this issue, but it's more than an year old and I am wondering if there is a cleaner way to achieve this now.
Why not use the call binding to accomplish this?
Here's an example: https://gist.run?id=3cc553ea3bd7ed1862d87d8dbe4f5f84
app.html
<template>
<require from="./entry"></require>
<h2 class='text-center'>Journal Entries</h2>
<div>
<entry repeat.for='entry of entries' entry.bind='entry' delete-function.call="deleteEntry(entry)"></entry>
</div>
</template>
app.js
export class App {
entries = [{
'date': 'Jan 1',
'note': 'Hello World'
}, {
'date': 'Jan 2',
'note': 'Good Morning'
}];
deleteEntry(entry) {
console.log("Deleting entry");
console.log(entry);
const index = this.entries.indexOf(entry);
this.entries.splice(index, 1);
}
}
entry.html
<template>
<div>${entry.date} <button click.trigger='delete()'>X</button></div>
<div>${entry.note}</div>
</template>
entry.js
import {bindable} from 'aurelia-framework';
export class EntryCustomElement {
#bindable entry;
#bindable deleteFunction;
delete() {
this.deleteFunction();
}
}
Obviously in a real implementation, you'll need to make sure that what is bound to deleteFunction is actually a function before trying to call it.
Using bind life cycle event you can get parent View modal in Aurelia.
bind(bindingContext, overrideContext) {
this.parent = bindingContext;
}
Now you can access all the variables and methods from parent view to your view.
Like below code in child view
this.parent.parentmethod();
Related
Is there anyway I can get a reference to all the viewmodels of the child components in my lanes property on the BoardComponent viewmodel? I need to have a reference of al <boardlane></boardlane> in the viewmodel of the <board></board> component. Is this possible?
App.ts
export class App {
public groups: any[] = [
{
title: 'first group'
},
{
title: 'second group'
}
]
}
<template>
<board>
<boardlane repeat.for="group of groups" title.bind="group.title"></boardlane>
</board>
</template>
Board Component
#customElement('board')
export class BoardComponent {
public lanes: BoardLaneComponent[];
}
<template>
<div class="board">
<slot></slot>
</div>
</template>
BoardLane Component
#customElement('boardlane')
export class BoardLaneComponent { }
<template>
<div class="boardlane">
I am a board lane
</div>
</template>
You can try the #children decorator:
Board Component
import {children} from 'aurelia-framework';
#customElement('board')
#children({ name: 'lanes', selector: 'boardlane' })
export class BoardComponent {
public lanes: BoardLaneComponent[];
lanesChanged() {
// Handle any mutations to the array here
}
}
<template>
<div class="board">
<slot></slot>
</div>
</template>
In theory this should maintain a list of child VMs on BoardComponent by using the selector to gather the elements within the view.
If the elements are non-aurelia backed elements they will be represented by Element instances in the specified array, otherwise they will be a reference to the actual Aurelia VM backing the element.
Also, it will by default create a function called <x>Changed where <x> is the name of the backing array. You can use this to be notified of any mutations happening to the tracked elements.
The only issue may be nesting - I believe the original implementation deep-selected into descendants but that was removed later. I'm not sure if it was re-introduced but the details are here:
https://github.com/aurelia/templating/issues/451
Assuming you don't need to go to grandchildren this should work.
Disclaimer: not done any Aurelia dev for a little while :(
Note: I don't think the docs clearly list the API for children and the selectorOrConfig parameter it takes
In the source it looks like this:
constructor(config) {
this.name = config.name;
this.changeHandler = config.changeHandler || this.name + 'Changed';
this.selector = config.selector;
this.all = config.all;
}
So it looks like the object can have those properties - not sure what all does though but interesting that you can change the name of the change handler that's fired when the array contents mutate.
I want to call a child component's function from its parent. I have a way to do it, but I want to know if I'm missing a better way.
From Ashley Grant's blog post about accessing a custom element's viewModel from a custom attribute, I see that Aurelia adds au to the element and you can access the viewModel through that. So, if I add a nested component with a ref, like this:
<template>
<nested-element ref="childElement"></nested-element>
</template>
I can call a function on it like this:
this.childElement.au.controller.viewModel.someFunction();
This feels roundabout. I was hoping I would be able to access a nested element's viewModel through the parameters to a hook that the parent implements, such as created(owningView, myView) but I can't find a path to it.
Have I missed a better way?
Edit: I forgot to add that I need a return value from the function I'm calling, so having access to the viewmodel itself is preferable
ref gives you the element. view-model.ref gives you the element's view model.
<template>
<nested-element view-model.ref="childViewModel"></nested-element>
</template>
Call it like this in the parent view-model:
this.childViewModel.someFunction();
If you only have one instance of the nested-element or don't care if multiple nested-elements respond to the event. Then you could use standard Javascript event functionality for this:
bar.html
<template>
<h1>${value}</h1>
<input type="text" value.bind="value"></input>
<foo>text</foo>
</template>
bar.ts
import {bindable} from 'aurelia-framework';
export class Bar {
#bindable value;
public valueChanged(newValue, oldValue) {
var event = new CustomEvent("some-event-name", { "detail": { message: "Hello from Bar", oldValue, newValue } });
document.dispatchEvent(event);
}
}
foo.html
<template>
<h1>${value}</h1>
</template>
foo.ts
import {bindable} from 'aurelia-framework';
export class Foo {
constructor() {
document.addEventListener("some-event-name", (e) => {
console.log('hello here is Foo, recieved event from Bar : ', e);
}, true);
}
}
I have custom Tabs functionality, but after the update of Aurelia to rc-1.0.x, there is issue with listing data from #children decorator.
My code look something like:
import {inject, customElement, children} from 'aurelia-framework';
#customElement('tabs')
#inject(Element)
#children({name:'tabs', selector: "tab"})
export class Tabs {
activeTab = undefined;
constructor(element) {
this.element = element;
}
attached() {
console.log(this.tabs); // Return undefined on promise resolve!!!
this.tabs.forEach(tab => {
if (tab.active) {
this.activeTab = tab;
}
tab.hide();
});
this.activeTab.show();
}
On first load everything is working just fine, and this.tabs is an array of items, as expected.
Next if I do a server request, when promise is resolved this.tabs console logs undefined.
If I set timeout it fix the issue, but is that the correct way?
Also I noticed in the html, that the repeat.for statement is executed, which give me a clue that this.tabs is received with some delay, after the attached function is handled.
The html:
<template>
<ul class="nav nav-tabs m-b-1">
<li repeat.for="tab of tabs">
<a href="#" click.trigger="$parent.onTabClick(tab)">
${tab.name & t}
</a>
</li>
</ul>
<slot></slot>
</template>
So is there a way to make that work with the Aurelia bind or attached methods or some more elegant way, instead to check the value of this.tabs with a timeout function?
I think this might be an adequate use-case for the Task Queue (but if someone more knowledgeable thinks otherwise, let me know). I have had to use the Task Queue before when accessing bindable values from inside of attached and your instance looks basically the same (except you're accessing them using #children).
The TaskQueue will push your logic to the end of the processing stack. So theoretically this means it will wait for Aurelia to finish running its internal logic for bindings and possibly children decorator resolution and then run your code.
There might be a better solution, but I have used this before to get out of a similar situation as I mentioned earlier and have yet to find a better solution that fixes the problem, specifically in regards to accessing dynamic values inside of attached.
import {TaskQueue} from 'aurelia-framework';
#customElement('tabs')
#inject(Element, TaskQueue)
#children({name:'tabs', selector: "tab"})
export class Tabs {
activeTab = undefined;
constructor(element, taskQueue) {
this.element = element;
this.taskQueue = taskQueue;
}
attached() {
this.taskQueue.queueMicroTask(() =>{
this.tabs.forEach(tab => {
if (tab.active) {
this.activeTab = tab;
}
tab.hide();
});
this.activeTab.show();
});
}
Almost give up on Aurelia, I'm struggling with adding custom elements dynamic in Aurelia,
lets say we have a custom tag:
view my-element.html:
<template> My Element ${name} </template>
viewmodel: my-element.js:
export class MyElement {
#bindable name = '';
}
so I try to manually add this tag, in another view:
<template>
<button type="button" click.delegate="createMyElement()">Remove</button>
</template>
another viewmodel:
export class App {
createMyElement() {
//how to do it in here to create element
//<my-element name='name1'></my-element>
}
}
I looked this link https://gist.run/?id=762c00133d5d5be624f9, but it needs a container reference
<div ref="container"></div>
I dont want to specify a container, instead I want it to be append to current view.
I also tried using aurelia-compiler from https://github.com/gooy/aurelia-compiler, when I try to import it, it was able to locate file'gooy/aurelia-compiler', but I got this error:
Error invoking Compiler. Are you trying to inject/register something that doesn't exist with DI?
Can someone please help? thanks.
You could inject the view's html element and use it as a "container". Like this:
import {inject} from 'aurelia-framework';
import {ViewFactory} from './view-factory';
#inject(Element, ViewFactory)
export class App {
//...
constructor(element, viewFactory) {
this.element = element;
this.viewFactory = viewFactory
}
}
Then, use this.element in the insert method:
this.dispose = this.viewFactory.insert(this.element, this.viewHtml, viewModel);
Running example:
https://gist.run/?id=9d5e7a60cd02e55618829a304df00621
Hope this helps!
Rather than trying to manually inject views through your viewModel (controller), try creating new viewModels from which to generate views. So, like this:
home.html
<template>
<my-element repeat.for="name of names" name.bind="name"></my-element>
<button click.delegate="addName()">Create My Element</button>
</template>
home.js
export class HomeViewModel {
constructor() {
this.names = []
}
addName() {
this.names.push('Jim');
}
}
A few days ago I asked this question 2 way databinding in Aurelia custom elements - bind custom element to parent viewmodel
Now I need to be able to reuse the allSelectableValues from my custom element (my-custom.js) in my parent element (create.js).
I need this for a custom value converter I have on create.js which contains some Ids which I need to display names for instead, by looping through the array of elements, currently fetched and residing in my custom element.
**create.html**
<td>${d.SomeID | allSelectableValuesMapping}</td>
and
**value-converters/all-selectable-values-mapping.js**
export class AllSelectableValuesMappingValueConverter {
toView(value) {
for(let item in allSelectableValues) {
if (item.SomeID == value){
return item.Name;
}
}
}
}
In the ideal world I'd have hoped something like this would have worked:
**my-custom.js**
async attached() {
this.allSelectableValues= await await this.myService.getAllValues();
this.parent.allSelectableValues = this.allSelectableValues;
}
But my custom element have no idea of the parent which is requiring it.
Does anyone have an idea how to set the parent's allSelectableValues equal to the custom element's allSelectableValues from within the custom element? Or is there another, better way of achieving it, while still maintaining the two-way databound custom element?
Something like this ?
Please take extra note of the #customElement('CustomElement') declarator above the export class CustomElement line of code.
Custom Element View Model
import {inject} from 'aurelia-framework';
import {customElement} from 'aurelia-framework';
import {bindable} from 'aurelia-framework';
#customElement('CustomElement')
export class CustomElement {
#bindable arrItems
}
Custom Element HTML
<template>
<div repeat.for="item of arrItems">$(item.someProperty}</div>
</template>
Parent View Model
export class ParentViewModel {
parentArrItems = [];
}
Parent HTML
<template>
<require from="customelement"></require>
<CustomElement arrItems.bind="parentArrItems"></CustomElement>
</template>