Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://unpkg.com/can/dist/global/can.all.js"></script>
</body>
</html>
 
var MyMap = can.DefineMap.extend('MyMap', {
  init_loaded: {
    value: false
  },
});
​
var MyComponentTemplate = can.stache( '{{#if init_loaded}}<div id="test">test element</div>{{/if}}' );
​
var MyComponent = can.Component.extend({
    tag: 'my-component',
    viewModel: MyMap,
    view: MyComponentTemplate,
    events: {
      init: function(){
        //this.viewModel.init_loaded = true;
        setTimeout(function(){
          this.viewModel.init_loaded = true;
        }.bind( this ), 2000);
      },
      inserted: function( element ){
        if( this.viewModel.init_loaded ) {
          //console.log( this.element.getElementById( 'test' ).style.color = "red" );
          //console.log( this.element.querySelector( '#test' ) );
        }
        this.viewModel.on( 'init_loaded', function( ev, newVal, oldVal ){
          if( newVal ) {
              //MyComponentTemplate();
              console.log( this.element.querySelector( '#test' ) );
          }
        }.bind( this ));
      }
    }
});
​
var MyRender = can.stache( '<my-component/>' );
var fragment = MyRender(  )
document.body.appendChild(fragment)
Output

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

Dismiss x