Aurelia 2 custom element binding

Help Requests
1

<rant>
As a dabbler in web-development I must admit that I don’t find going from Aurelia 1 to Aurelia 2 a smooth ride. E.g. in the section on Migrating from Aurelia <compose> we find the following statement The same ease of use is still there... and then it goes on to say that if you want a view supporting a dynamically loaded module, you can create a value converter(!) for this and then goes on to show a template attribute being assigned a full URL, while I guess most devs. probably would like to know if a relative path can be used (as in v1) or if an absolute path/url is required. I’m looking from this in the small so to say, but I fail to see the rational for removing something that was very easy to understand.

(Btw, I do not find going from the old router to the new router(s) easy either).

However, not being a full-time web-developer I understand that the problem may be a PEBKAC problem, but my customer has teams using Angular or React and our team is under pressure to ditch Aurelia. If the path to v2 is viewed as difficult, people might be tempted to go for e.g. React since they will be learning something (almost completely) new anyway.
</rant>

Now to the problem at hand. I have created a view (no view model) like this (status-view.html):

<bindable="ws"></bindable>
<div class="card" style="margin-right: 0.75rem;">
    <img src.bind="ws.country.imageName" alt="country flag" class="card-image-top">
    <div class="card-body">
        <h5 class="card-title">Uke ${ws.weekNumber}</h5>
        <div class="list-group">
            <div class="list-group-item">
                <div>
                    <div class="row">
                        <div class="col-sm-10">
                            <p>Fullst.kontroll</p>
                        </div>
                        <div class="col-sm-2">
                            <span class="text-align: center;">&checkmark;</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-10">
                            <p>Status</p>
                        </div>
                        <div class="col-sm-2">
                            <span class="text-align: center;">&checkmark;</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

with the containing view looking like this (status-list-view.html):

<import from="./status-view.html"></import>
<div class="card-group">
    <status-view repeat.for="weekstatus of weekStatuses" ws.bind="weekstatus"></status-view>
</div>

with the corresponding view model looking like (status-list-view.ts):

import { customElement } from "aurelia";
import { CountryService } from "../resources/services/country-service";
import { WeekStatus } from "../resources/types/week-status";

@customElement('status-list-view')
export class StatusListView {

    weekStatuses : Array<WeekStatus>;

    constructor(countryservice: CountryService) {
        this.weekStatuses = countryservice.getStatusPerCountry();
    }
}

When run I can set a break-point in the constructor and see that the array indeed contains the expected values with all properties set, but when the status-view is rendered no values from the bound parameter is shown. Can someone please tell me what I’m doing wrong? I’ve tried to follow the to-do example code but while it works (I guess), my code doesn’t. :frowning:

TIA

–norgie

2

What value do you expect to see? Do you even get the value at ws property?

Is the configuration giving a difficult time?

Sorry to hear that. :crossed_fingers:for your team performance with any framework.

3

If you change this:

to this:

<div class="card-group">
    <div repeat.for="of weekStatuses">
       ${weekstatus. weekNumber}
   </div>
</div>

Is the correct value rendered?

4

I expect to see e.g. the value of the weekNumber property on ws. However, as per your second question, I added this <div if.bind="ws" class="card-header">${ws.country.name}</div><div else>Nothing there</div> and Nothing there gets rendered. So I guess the question is, why isn’t this working?

<status-view repeat.for="weekstatus of weekStatuses" ws.bind="weekstatus"></status-view>

I made a change to status-list-view.html just to debug the d…n thing :wink:

    <template repeat.for="weekstatus of weekStatuses">
        ${weekstatus.weekNumber}
    </template>

then 42 gets rendered six times which is what I expected.

Regarding the router issues, it’s more a question of how to do things in v2 that I found quite easy in v1. I’ll post another question specific to the router so that this thread doesn’t get “polluted”.

Finally. I understand that my rant in the original post probably didn’t come across as particularly constructive, but I was the one (at the customer) who championed Aurelia when everyone else was looking elsewhere. We’re a four person team and two of us has had the pleasure of working with v1. to and fro. When my colleague was introduced to Aurelia he was a bit skeptic at first, but v1’s design (view and view model) was something he was used to from e.g. caliburn.micro and he therefore felt right at home in Aurealia :slight_smile: With a bit of help from the Aurelia community I was able to deliver three successful applications to our end-users and when he was brought on board my colleague was able, with fairly little effort, to extend one of them with lots of new functionality when required by said users.

Perhaps what I’m missing is a piece of documentation detailing how to map concepts in v1 to v2. I know there’s documentation out there, but it is too terse for my liking. As I said it is probably a case of PEBKAC, but I need to be able to demonstrate that Aurelia really is a viable option compared to more popular choices, just as I did when I started delivering solutions based on v1 beta-N back in the day. Don’t get me wrong, I really, really want Aurelia to succeed both in the bigger picture and also in our context. For the latter to happen I must be able to demonstrate to the doubters that Aurelia is still a viable option.

(to be honest neither React nor Angular are very tempting. Neither is Blazor.)

5

Yes. See my reply to bigopon :slight_smile:

6

Maybe this is just a typo in the example but I think

should be

<bindable name="ws"></bindable>
7

Jeebuz, you’re right. That attribute had escaped my attention. The binding works now. Thank you, thank you, thank you.

1 Like
8

I’ve upgraded a couple of rather large plugins to v2. Can’t say it was without effort, but it was mostly rename /replace effort

2 Likes