Ractive.js Tutorial 5-1

index.html

<!-- http://learn.ractivejs.org/conditional-sections/1 -->
 
<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>

<div id='container'></div>


<script id='template' type='text/ractive'>
  {{#if signedIn}}
  <!-- message for signed-in users -->
  <p>Welcome back, {{username}}!</p>
  {{/if}}
  
  {{#if notSignedIn}}
  <!-- message for non-signed-in users -->
  <p>hi there! Please <a class='button' on-click='signIn'>sign in</a></p>
  {{/if}}
</script>

Ractive.js-Tutorial-5-1.markdown

Ractive.js Tutorial 5-1

A Pen by Ken on CodePen.

License.

script.js

var ractive = new Ractive({
  el: 'container',
  template: '#template',
  data: {
    signedIn: false,
    notSignedIn: true
  }
});

ractive.on('signIn', function(){
  var name = prompt('Enter your username to sign in', 'ractive_fan');
  ractive.set({
    username: name,
    signedIn: true,
    notSignedIn: false
  });
});