javascriptcanjs

'^@' notation in Can JS, while passing data to components

In Can JS, I have seen using a notation '^@', with the values passed to another Component. For example: if sample is an input component then:

<sample
"^@validation"="validation"/>

Can anyone help me to understand the usage of "^@" notation.

Can JS version: 2.3.27

Solution

  • ^ is a one-way child-to-parent binding (think of the ^ pointing up from the child property to the parent component). You can find more info in the {^to-parent} docs.

    @ (called the “at operator”) is useful when values are functions. In CanJS 2.3 and 3.x, stache will call those functions to get their values by default; @ bypasses that, and instead uses the function as the value. This is mentioned in the 2.3 expression docs, but more clearly explained in the 3.x docs.