JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<div id="container"></div>

<script id="template" type="ractive/template">
    <label>
        <input type='checkbox' checked='{{shouldBlock}}'/> should block changes
    </label>
    
    <input value="{{naam}}">
    {{naam}}
</script>

JavaScript

var ractive = new Ractive({
    el: '#container',
    template: '#template',
    data: {
        naam: '',
        changes: ['one']
    }
});

ractive.observe( 'naam', function ( newValue, oldValue ) {
    if(this.get('shouldBlock')){
        alert('there are still changes, you\'re not allowed to change');
        
        // reset to oldValue...
        this.set( 'naam', oldValue );
        
        // because the input's value won't reset to the model value
        // while it's focused (to prevent the cursor jumping around
        // etc), we need to forcibly update it
        this.find( 'input' ).value = oldValue;
    }
}, { init: false });