can/demos/can-component/click_me.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<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>