Binding 2 values in Aurelia

0
votes

I am new to Aurelia and having this issue in value binding that I do not understand why it is not working.

So I have a parent component and this is part of its html that uses the child component:

 <div repeat.for="testWebsite of testWebsites" class="tab-pane ${$index==0? 'active' : ''}" id="${testWebsite.website_id}" role="tabpanel">
            <test-website showSummaryBar.bind="testWebsites.length > 1" payload.bind="testWebsite"></test-website>
        </div>

test-website is the child component. In its code I declare 2 bindable variables as below:

export class TestWebsiteCustomElement {
@bindable payload;
@bindable showSummaryBar;
.....

payload is successfully bound to testWebsite as set from the parent. However showSummaryBar is always null. Do I miss out anything? Thanks in advance.

1
aurelia

1 Answers

1
votes

Bindable properties get converted from camelCase in the VM to dash-case (also known as "kebab case") in the View. So showSummaryBar becomes show-summary-bar

<test-website show-summary-bar.bind="testWebsites.length > 1" 
              payload.bind="testWebsite"></test-website>