Passing custom attributes to the Aurelia component

Question

I'm having trouble passing attributes to a custom component. I tried to declare my component in 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 a warning is raised, undefined is the value I get from it. In addition, is a design element required?

Answer 1

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

Try the following:

 <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 ViewModel, so your virtual machine is already beautiful.