can/demos/can-component/hello-world.html

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

<div id="demo-html">
<div id='out'></div>
<script id="app" type="text/mustache">
	<hello-world></hello-world>
</script>
</div>
<script src="../../node_modules/steal/steal.js" main="@empty"></script>
<script id="demo-source">
steal("can/component",function(){
	var x = 0;
can.Component.extend({
  tag: "hello-world",
  template: "{{#if visible}}<b>{{message}}</b>{{else}}<i>Click me</i>{{/if}}",
  viewModel: {
    visible: false,
    message: "Hello There!"
  },
  events: {
    click: function(){
    	this.viewModel.attr("visible", true)
    }
  }
});

$("#out").html( can.view("app",{}) )

})
</script>