Passing Custom Attributes into Aurelia Component

Question

I'm having some trouble passing attributes into a custom component. I have tried declaring my component the following ways:

<require from="../components/project-documents"></require>

<project-documents projectId="testing123"></project-documents>
<project-documents projectId.bind="project.Name"></project-documents>

---

import {customElement, bindable} from "aurelia-framework";
import {autoinject} from "aurelia-dependency-injection";

@customElement("project-documents")
export class ProjectDocuments {

    @bindable projectId:string;

    attached() {
        alert(this.projectId);
    }
}

When the alert is called, undefined is the value I get from it. Also, is the customElement decorator required?

Answer 1

Instead of using camelCase for your attributes, try dash-case.

Try this:

<project-documents project-id="testing123"></project-documents>
<project-documents project-id.bind="project.Name"></project-documents>

According to aurelia conventions, dash-case'd attributes will be converted to camelCase variables in your ViewModel, so your VM is already fine.