Skip to content

Instantly share code, notes, and snippets.

@ahallora
Created November 4, 2016 12:24
Show Gist options
  • Save ahallora/91c21d58067ff649d7a40137bfb3bf8e to your computer and use it in GitHub Desktop.
Save ahallora/91c21d58067ff649d7a40137bfb3bf8e to your computer and use it in GitHub Desktop.
Ractive test: Change object across "ractives"
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.8.4/ractive.min.js" integrity="sha256-heXunjNkqBw9mc4urNeQE1t8qZRu4c8jSqjhE7c45BU=" crossorigin="anonymous"></script>
<h1>Ractive test</h1>
<div style="float: left; width: 50%; background-color: #eee;" id="placeholderOne"></div>
<div style="float: left; width: 50%; background-color: #ddd;" id="placeholderTwo"></div>
<script id='templateOne' type='text/ractive'>
<h2>This is ractiveOne</h2>
<p>{{greeting}}, {{user.name}}!</p>
<button id="save">Save data</button>
</script>
<script id='templateTwo' type='text/ractive'>
<h2>This is ractiveTwo</h2>
<p>{{greeting}}, {{user.name}}!</p>
<button id="test">Change name to Peter</button>
</script>
<script>
var userdata = {
name: 'Anders'
};
var ractive = new Ractive({
el: '#placeholderOne',
template: '#templateOne',
data: { greeting: 'Hello', user: userdata }
});
var ractiveTwo = new Ractive({
el: '#placeholderTwo',
template: '#templateTwo',
data: { greeting: 'Goddag', user: userdata }
});
$(document).on('click', '#test', function() {
ractive.set( 'user.name', 'Peter' );
});
$(document).on('click', '#save', function() {
console.dir(ractive.get( 'user' ));
console.dir(ractiveTwo.get( 'user' ));
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment