Forms with New Stache Syntax

_Forms with CanJS 2.3 Stache Syntax.md

Forms with CanJS 2.3 Stache Syntax

This gist shows examples of how to handle different types of form elements with the new stache binding syntax in CanJS 2.3.

checkbox.js

var ViewModel = can.Map.extend({
  define: {
    options: {
      value: [
        'one',
        'two',
        'three'
      ]
    },
    selectedValues: {
      Type: can.List,
      Value: Array
    }
  },
  selectedValuesContains: function(val) {
    return this.attr('selectedValues').indexOf(val) >= 0;
  },
  toggleSelectedValue: function(val) {
    var index = this.attr('selectedValues').indexOf(val);
    
    if (index < 0) {
     this.attr('selectedValues').push(val);
    } else {
      this.attr('selectedValues').splice(index, 1);
    }
  }
});

checkbox.stache

<form>
  {{#each options}}
    <input type="checkbox" {$value}="." id="{{option-%index}}" ($click)="toggleSelectedValue(%element.value)" {$checked}="selectedValuesContains(.)" >
    <label for="{{option-%index}}">{{.}}</label>
  {{/each}}
</form>

radio.js

var ViewModel = can.Map.extend({
  define: {
    options: {
      value: [
        'one',
        'two',
        'three'
      ]
    },
    selectedValue: {
      value: 'one',
      set: function(val) {
        console.log('selectedValue: ' + val);
        return val;
      }
    }
  },
  setSelectedValue: function(val) {
    this.attr('selectedValue', val);
  }
});

radio.stache

<form>
  {{#each options}}
    <input type="radio" {$value}="." id="{{option-%index}}" ($click)="setSelectedValue(%element.value)" {{#is selectedValue .}}checked="checked"{{/is}} >
    <label for="{{option-%index}}">{{.}}</label>
  {{/each}}
</form>

select.js

var ViewModel = can.Map.extend({
  define: {
    options: {
      value: [
        'one',
        'two',
        'three'
      ]
    },
    selectedValue: {
      set: function(val) {
        console.log('selectedValue: ' + val);
        return val;
      }
    }
  }
});

select.stache

<form>
  <select {($value)}="selectedValue">
    {{#each options}}
      <option {$value}=".">{{.}}</option>
    {{/each}}
  </select>
</form>