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>CanJS Question</title>
</head>
<body>
  <can-parent></can-parent>
<script src="https://unpkg.com/can@5/dist/global/core.js"></script>
<script>
can.Component.extend({
   tag: "can-tag1",
   view: `{{tag1Variable}}`,
   ViewModel: {
     clickData: "string",
     get tag1Variable() {
       return this.clickData || "Click Me!";
     }
   },
   events: {
      click: function () {
         this.viewModel.clickData = `Clicked!`;
      }
   }
});
   
can.Component.extend({
   tag: "can-tag2",
   view: `{{tag2Variable}}`,
   ViewModel: {
     clickData: "string",
     get tag2Variable() {
       return this.clickData || "No change detected.";
     }
   }
});
can.Component.extend({
   tag: "can-parent",
   view: `
    <can-tag1 clickData:to="scope.vars.sharedState" />
    <br><br>
    <can-tag2 clickData:from="scope.vars.sharedState" >
   `
});
</script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers