Created
October 19, 2018 13:06
-
-
Save martindrapeau/097e21bea76362a0976386ad9c0c7326 to your computer and use it in GitHub Desktop.
diffDOM INPUT change bug
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="http://fiduswriter.github.io/diffDOM/diffDOM.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| var value = 'hello'; | |
| var template = ` | |
| <div> | |
| <input type="text" value="{value}" /> | |
| <button>Clear</button> | |
| </div> | |
| `; | |
| var dd = new diffDOM(); | |
| function render() { | |
| var div = $('div')[0]; | |
| var $html = $(template.replace('{value}', value || '')); | |
| var diff = dd.diff(div, $html[0]); | |
| dd.apply(div, diff); | |
| $('pre').text(diff.map(function(o) { | |
| return JSON.stringify(o); | |
| }).join('\n')); | |
| } | |
| $(document).on('click', 'button', function(e) { | |
| value = null; | |
| render(); | |
| }); | |
| render(); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>INPUT does not change</h1> | |
| <p> | |
| Click on the Clear button. | |
| It will set the <code>value</code> attribute to an empty string. | |
| Yet the element in the DOM does not change. | |
| It takes another click on Clear to make it happen. | |
| Below, is output the diff for debugging. | |
| </p> | |
| <div></div> | |
| <pre></pre> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment