ViewModel property formatting differences between the ViewModel and Stache

CanJS
1

This tripped me up, so it probably will be a gotcha for others as well.

Stache now has the ability to pass around VM properties between components. For example

<my-component {^prop}="*localprop" />
<second-comp {prop2}="*localprop" />

where {^prop} pushes the VM property from my-component to the stache local var localprop and then localprop is assigned to prop2 in second-comp. All is well.

What happens when your VM prop is camelCased (or kebab cased, or whatever you want to call it), such as myProp?

Will this work?

<my-component {^myProp}="*localprop" />

No it will not. Why? because HTML is case INsenSitiVe.

Therefore you need to hyphenate your camels (skewer your kebabs?) and use

<my-component {^my-prop}="*localprop" />

Hope that helps. And thanks to @phillipskevin for pointing this out.

2 Likes