Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script type="text/stache" id="todomvc-template">
  {{#each list}}
    <div class="details" style="display: block;">
      ID from object one level down: {{id}}<br>
      <br>Now calling the special view tag and passing the object from this stache
      <my-tag>
        {{#if display}}ID one level down (shown via special tag): {{id}}{{/if}}
      </my-tag><br>
    </div>
    <hr>
  {{/each}}
</script>
<script type="text/stache" id="my-tag-template">
  <button ($click)="toggle">toggle visibility</button>
  <div class="{{#if display}}visible{{/else}}invisible{{/if}}">
    <content />
  </div>
</script>
 
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://unpkg.com/can/dist/global/can.all.js"></script>
</body>
</html>
 
             .invisible {display: none;}
                .visible {display: block;}
 
var test = can.DefineMap.extend({
  id: "number",
  increase: function() {this.id=this.id+1;}
});
test.List = can.DefineList.extend({"#": test});
var mylist = new test.List([{id: "1"},{id: "2"}]);
/*Special helper*/
var ViewModel = can.DefineMap.extend({
  display: {type: "boolean", value: "true"},
  toggle: function() {this.display=!this.display;}
});
can.Component.extend({
  tag: "my-tag",
  ViewModel: ViewModel,
  view: can.stache.from("my-tag-template"),
  leakScope: true
});
 
 
var template = can.stache.from("todomvc-template");
var frag = template({list: mylist});
document.body.appendChild(frag);
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers