обновление ractive.js при изменении массива без 'magic: true' - PullRequest
Новая
       10

обновление ractive.js при изменении массива без 'magic: true'

0 голосов
/ 17 мая 2018

Я использую Ractive для отображения данных из постоянно меняющегося массива (полученного из PouchDB) с параметром magic: true.Это работало нормально, пока в версии 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 голосов
/ 03 сентября 2018

Я нашел какой-то ответ и решил поделиться им, даже если он не работает на 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 перерисовывается), что, конечно, нежелательно в высокодинамичных приложениях. Поэтому я не буду отмечать это как ответ к настоящему времени.

0 голосов
/ 01 июня 2018

Если 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()
      }
    });
}
...