bitovi/canjs

<script id="demo-html" type="text/stache">
<hello-world />
</script>
<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty" id="data-source">
import {DefineMap, stache, Component} from "can";
const HelloWorldVM = DefineMap.extend({
   message: {
       default: "Hello There!"
   },
   visible: {
       default: false
   }
});

Component.extend({
   tag: "hello-world",
   view: stache("{{# if(visible) }}{{ message }}{{ else }}Click me{{/ if }}"),
   ViewModel: HelloWorldVM,
   events: {
       click: function() {
           this.viewModel.visible = !this.viewModel.visible;
       }
   }
});

const template = stache.from('demo-html');
document.body.appendChild(template({}));
</script>
</body>