Elements and Attributes

  • page
can.elementAndAttributes  

A list of all custom elements and attributes that CanJS supports.

can.Component, can.view.attr, can.view.tag let you create custom element and attribute behavior. However, CanJS and its plugins supply the following behaviors:

Core

With the release of canJS 2.3 the new binding syntax provides powerful event, one-way and two-way bindings on element attributes, component viewModels, and the scope.

  • Event-Binding
    • Binds events on viewModel and calls method on the scope with the specified arguments

      <my-component (show)="doSomething('primitive', key, hash1=key1)"/>
      
    • Binds events on a DOMEvent and calls method on the scope with the specified arguments

      <div ($click)="doSomething('primitive', key, hash1=key1)"/>
      
  • One-Way-Binding
    • One-Way binds the value in the scope to a child component's viewModel property (child-prop)

      <example>
        <my-component {child-prop}="value"/>
      </example>
      

      Updates child-prop when value changes

    • One-Way binds the value in the scope to a element's attribute or property.

      <input {placeholder}="value">
      

      Updates placeholder when value changes

    • Reverse the One-Way binding by adding a ^ at the beginning.

      <example>
        <my-component {^child-prop}="value"/>
      </example>
      

      Updates value when child-prop changes

    • Export a viewModel to the references scope by adding an attribute with the hypenated name of the reference scope property

      <example {child-prop}="*foobar"/>
      <input type="text" {($value)}="*foobar">
      

      Export child-prop from <example>'s viewModel into *foobar (reference scope) and two-way bind *foobar to the element's attribute. If the element's attribute changes, *foobar will change and updates the child-prop on <example>. If child-prop nothing will happen.

  • Two-Way-Binding

    • Two-Way binds the value in the scope and the child component's viewModel property (child-prop)

      <example>
        <my-component {(child-prop)}="value"/>
      </example>
      

      Updates child-prop when value changes, updates value when child-prop changes.

    • Two-Way binds the value in the scope and the element's attribute or property.

      <input {($value)}="myValue">
      

      Updates the element's attribute value when myValue changes, updates myValue when the element's attribute value changes.

    • Export a viewModel to the references scope by adding an attribute with the hypenated name of the reference scope property

      <example {(child-prop)}="*foobar"/>
      <input type="text" {($value)}="*foobar">
      

      Export and two-way bind child-prop from <example>'s viewModel into *foobar (reference scope) and two-way bind *foobar to the element's attribute. If the element's attribute changes, *foobar will change and updates the child-prop on <example>. If child-prop changes, *foobar will change and updates the element's value attribute.

  • Passes primitive to viewModel This does not binding properties together but show you how you can pass a primitive string to a component viewModel

    <example child-prop="foobar"/>
    

Plugins

The following functionality is available within plugins:

  • can-autorender - Autorenders a script tag within the page as a template.

    <script type='text/stache' can-autorender>
      <my-component></my-component>
    </script>
    
  • <can-import> - Imports dependencies in a stache template using a System loader, StealJS, or AMD. This only works in templates loaded by can-autorender or imported with the system plugin.

    <can-import from="components/my-component"/>
    <can import from="helpers/stache-helpers"/>
    <my-component> {{myHelper "value"}} </my-component>
    

    You can also dynamically import a module and nest content within:

    {{#eq page "home"}}
      <can-import from="components/my-component">
        {{#eq state "pending"}}
          <img src="loading.gif"/>
        {{/eq}}
    
        {{#eq state "resolved"}}
          <my-component></my-component>
        {{/eq}}
      </can-import>
    {{/eq}}