数组更改时更新ractive.js没有' magic:true'

时间:2018-05-17 17:53:44

标签: javascript node.js ractivejs

我使用Ractive以magic: true参数显示来自不断变化的数组(从PouchDB接收)的数据。这在版本0.9.x中工作正常,此参数不再可用。

因此建议每次我的数组更改时使用ractive.update()。我面临的问题似乎很简单,但我相当缺乏经验: 为了跟踪更改,我大致执行以下操作(取自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我的数据已经发生变化并且需要自行更新?

2 个答案:

答案 0 :(得分:0)

如果reactToChanges只是一个设置&#34;听众的功能&#34;对于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()
      }
    });
}

答案 1 :(得分:0)

我找到了某种答案,并认为我会分享它,即使它不能按要求工作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()将页面的整个活动部分更改为默认状态(恢复之前折叠的每个手风琴并重新绘制每个chart.js),这在动态性很高的情况下当然是不希望的应用。因此,到目前为止,我也不会将其标记为答案。