Question

我想让多个Ractive实例绑定到同一个数据。

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');

有没有办法可以创建全局密钥路径，以便r1得到通知？

感谢。

Answer 1

一些选择：

使用.update()告诉其他实例更新：

var r2 = new Ractive({ el:.., template:..., data:data })

r2.set('text', 'New Text');
r1.update(/*'text'*/)

您可以使用更改事件来更进一步：

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进一步采用了这个概念created a Ractive adapter：

var r2 = new Ractive({ el:.., template:..., 
    data: r1,
    adapt: ['Ractive'] })

仍然存在一些对阵列具有双向支持的漏洞，但这是一个良好的开端。

如果您不需要IE8支持且所有浏览器都支持defineProperty，您可以使用魔术模式：

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'

最后，您可以考虑对Ractive进行升级，并将其作为组件的两个视图的父级：

<div>
  <r1-component data="{{.}}"/>
  <r2-component data="{{.}}"/>
</div>

（但你的布局是如此）。我经常发现这种方法效果最好，因为最终会有一些Ractive帮助管理的顶级互动。

Ractive JS全球观察

1 个答案: