JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/qunit/qunit-1.14.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
JavaScript
var fixture = document.getElementById( 'qunit-fixture' );
test( 'ractive.update() on external model', function ( t ) {
var object = { deep: { name:'world' }}
var ractive = new Ractive({
el: fixture,
template: 'hello {{object.deep.name}}!',
data: { object: object }
});
t.equal( fixture.innerHTML, 'hello world!' );
t.deepEqual( ractive.get(), { object: {deep: {name: 'world' }}});
object.deep.name='there';
ractive.update();
t.equal( fixture.innerHTML, 'hello there!' );
t.deepEqual( ractive.get(), { object: {deep: {name: 'there' }}});
});
test( 'ractive.update(\'x\') on external model', function ( t ) {
var object = { name:'world' }
var ractive = new Ractive({
el: fixture,
template: 'hello {{object.name}}!',
data: { object: object }
});
t.equal( fixture.innerHTML, 'hello world!' );
t.deepEqual( ractive.get(), { object: {name: 'world' }});
object.name='there';
ractive.update("object");
t.equal( fixture.innerHTML, 'hello there!' );
t.deepEqual( ractive.get(), { object: {name: 'there' }});
});
test( 'ractive.set({x:x}) on external model', function ( t ) {
var object = { name:'world' }
var ractive = new Ractive({
el: fixture,
template: 'hello {{object.name}}!',
data: { object: object }
});
t.equal( fixture.innerHTML, 'hello world!' );
t.deepEqual( ractive.get(), { object: {name: 'world' }});
object.name='there';
ractive.set({object:object});
t.equal( fixture.innerHTML, 'hello there!' );
t.deepEqual( ractive.get(), { object: {name: 'there' }});
});