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 をレベルアップして、コンポーネントとしてこれら 2 つのビューの親にすることを検討してください。

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

（ただし、レイアウトは変わります）。多くの場合、Ractive が管理を支援するトップレベルのやり取りが発生するため、これが最も効果的であることがわかりました。

于 2014-07-09T20:04:01.623 に答える