Ractive.js: Ractive.extend() global data - ractivejs

Question

I try to add a button to a menu with Ractive.js and on click on this button sidebar should be opened.
js:
var ractive_setup = Ractive.extend({
data: {
data: {
sidebar: false,
}
},
onrender: function ( options ) {
this.on({
sidebar: function () {
this.toggle('sidebar');
console.log ( this.get('sidebar') );
}
});
}
});
var ractive_sidebar_open = new ractive_setup({
template: '#sidebar-open',
el: '[data-ractive=sidebar-open]'
});
var ractive_sidebar = new ractive_setup({
template: '#sidebar',
el: '[data-ractive=sidebar]'
});
html:
<nav data-ractive="sidebar-open"></nav>
<script id="sidebar-open" type="text/ractive">
<button class="open" on-click="sidebar">open sidebar</button>
</script>
<aside data-ractive="sidebar"></aside>
<script id="sidebar" type="text/ractive">
{{ #if sidebar }}
<button on-click="sidebar">close sidebar</button>
<div class="sidebar-content">sidebar content</div>
{{ /if sidebar }}
</script>
On button.open click, data changes only for one instance of ractive_setup—for the first one.
How to modify Ractive data globally, for both ractive_setup instances?

Answer 1

You need to declare your data-object outside, and pass it into both instances of your ractive_setup. With magic mode (docs) option on, both instances will then re-render when your data is modified.
Like this:
var ractive_setup = Ractive.extend({
magic: true, //Magic mode to ensure re-render when data is modified
onrender: function ( options ) {
this.on({
sidebar: function () {
this.toggle('sidebar');
console.log ( this.get('sidebar') );
}
});
}
});
//declaring your data-object outisde, so you can pass it into both instances
var dataObj = {
sidebar: false
};
var ractive_sidebar_open = new ractive_setup({
template: '#sidebar-open',
el: '[data-ractive=sidebar-open]',
data: dataObj //passing in data to the first instance
});
var ractive_sidebar = new ractive_setup({
template: '#sidebar',
el: '[data-ractive=sidebar]',
data: dataObj //passing in data to the second instance
});
I've created a working fiddle of your example here: http://jsfiddle.net/08huhfar/3/