Ractive JS global observation - ractivejs

Question

I'm wanting to have multiple Ractive instances bind to the same data.
var data = { text:'Old Text'};
var r1 = new Ractive({ el:.., template:..., data:data })
.observe('text', function(value){
//r1 is not aware the data has been updated
alert(value);
});
var r2 = new Ractive({ el:.., template:..., data:data })
.observe('text', function(){
});
r2.set('text', 'New Text');
Is there a way I can create global key paths so that r1 gets notified?
Thanks.

Answer 1

A few options:
Use .update() to tell the other instance to update:
var r2 = new Ractive({ el:.., template:..., data:data })
r2.set('text', 'New Text');
r1.update(/*'text'*/)
You could use the change events to take this a bit further:
var r2 = new Ractive({ el:.., template:..., data:data })
r2.on('change', function(e){
r1.udpate()
//or to be more specific:
Object.keys(e).forEach(key, function(){
r1.update(key)
})
})
#Rich_Harris took this concept a bit further and created a Ractive adapter:
var r2 = new Ractive({ el:.., template:...,
data: r1,
adapt: ['Ractive'] })
There are still some holes with bidirectional support for arrays, but it's a good start.
If you don't need IE8 support and all your browsers support defineProperty, you can use magic mode:
var data = { text:'Old Text'};
var r1 = new Ractive({ data:data, magic: true })
r1.observe('text', function(value){
console.log('r1 says', value)
});
var r2 = new Ractive({ data:data, magic: true })
r2.observe('text', function(value){
console.log('r2 says', value)
});
r2.set('text', 'New Text')
data.text = 'Yep, this works too'
Lastly, you might consider up-levelling Ractive and have it be a parent of these two views as components:
<div>
<r1-component data="{{.}}"/>
<r2-component data="{{.}}"/>
</div>
(However your layout goes). Oftentimes I've found this works best because there ends up being some top-level interaction that Ractive helps manage anyway.