1

我想让多个 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 得到通知？

谢谢。

4

1 回答 1

2

几个选项：

用于.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 将这个概念更进一步，并创建了一个 Ractive 适配器：

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 帮助管理的顶级交互。

于 2014-07-09T20:04:01.623 回答