Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="CanJS jQuery">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id='out'></div>
<script id="app-template" type="text/stache">
  <core-textbox {(value)}="username" {map}="."></core-textbox>
  <composite-textfield text="even lower" {(value)}="username" {map}="."></composite-textfield>
</script>
  
<script id="core-textbox" type="text/stache">
  <div>
  <span>core-textbox: </span><input {($value)}="value"></input>
  </div>
</script>
  
<script id="composite-textfield" type="text/stache">
  <h3>{{text}}</h3>
  <core-textbox {(value)}="value"></core-textbox>
  {{showErrors map 'username'}}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="//canjs.com/release/latest/can.jquery.js"></script>
<script src="//canjs.com/release/latest/can.stache.js"></script>
<script src="//canjs.com/release/latest/can.map.define.js"></script>
<script src="//canjs.com/release/latest/can.map.validations.js"></script>
</body>
</html>
 
console.clear();
can.Component.extend({
  tag: 'core-textbox',
  template: can.view('#core-textbox')
});
can.Component.extend({
  tag: 'composite-textfield',
  template: can.view('#composite-textfield')
});
var Map = can.Map.extend({
  init: function() {
    this.validate('username', function(val) {
      if (!val) {
        return "can't be empty";
      }
    });
  }
}, {});
can.stache.registerSimpleHelper('showErrors', function(map, fieldName) {
  var errors = map.errors(fieldName);
  if (errors) {
    return errors[fieldName];
  }
});
$("body").prepend(
  can.view("app-template", new Map({}))
);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x