在没有'magic：true'的情况下更改数组时更新ractive.js

Question

我使用Ractive通过magic: trueparameter显示来自不断变化的数组（从PouchDB接收）的数据。这在版本0.9.x中工作正常，此参数不再可用。

因此建议在我的阵列更改时使用ractive.update()every。我面临的问题似乎很简单，但我相当缺乏经验：为了跟踪更改，我大致做了以下几点（取自PouchDB脚本）：

fetchInitialDocs().then(renderDocsSomehow).then(reactToChanges).catch(console.log.bind(console));

function renderDocsSomehow() {
    let myRactive = new Ractive({
      el: '#myDiv',
      template: 'my Template',
      //magic: true,
      data:{
        doc1: docs
      },
      components: {myComponents},
      computed: {computedValues}
    });
}
function reactToChanges() {
    //here my changes appear
    onUpdatedOrInserted(change.doc);
    myRactive.update() // <- I cannot use update here because "myRactive" is not known at this point.
}

我也尝试过在renderDocsSomehow()函数中设置一个观察者

ractive.observe('doc1', function(newValue, oldValue, keypath) {
  ractive.update()
});

但这并没有成功。

那么我如何通知Ractive我的数据已经改变并且需要自我更新？

Answer 1

如果reactToChanges只是为myRactive设置“监听器”并且从未在别处调用过的函数，那么你可以把它的代码放在oninit中。这样，您就可以访问该实例。

function renderDocsSomehow() {
    let myRactive = new Ractive({
      el: '#myDiv',
      template: 'my Template',
      //magic: true,
      data:{
        doc1: docs
      },
      components: {myComponents},
      computed: {computedValues},
      oninit(){
        //here my changes appear
        onUpdatedOrInserted(change.doc);
        this.update()
      }
    });
}

Answer 2

我找到了某种答案，并认为我会分享它，即使它没有按照要求100％工作。

如果我从第一个函数返回ractive它可用于第二个函数：

fetchInitialDocs().then(renderDocsSomehow).then(reactToChanges).catch(console.log.bind(console));

function renderDocsSomehow() {
    let myRactive = new Ractive({
      el: '#myDiv',
      template: 'my Template',
      data:{
        doc1: docs
      },
      components: {myComponents},
      computed: {computedValues}
    });
    return myRactive;
}
function reactToChanges() {
    //here my changes appear
    onUpdatedOrInserted(change.doc);
    renderDocsSomehow().update() 
}

令人遗憾的是，update()c将我页面的整个ractive部分改为默认状态（之前折叠的所有手风琴都被还原，并且每个chart.js都被重绘），这在高度动态的应用程序中当然是不可取的。因此，我现在也不会将其标记为答案。