Рактивный массив меняется, но не вычисляется значение
Я использую массив объектов в качестве данных для моего ractive компонента (полученного из PouchDB), который нуждается в фильтрации внутри ractive для правильного вывода. Но все, что я пробовал - даже если данные - называемые "документами", изменяется правильно, отфильтрованные, то есть вычисленные значения, остаются прежними.
Я попробовал с методом:
new Ractive({
el: '#container',
template: Listing,
magic: true,
modifyArrays: true,
data: {docs},
computed: {
List: function(){
let tempList = [];
for(var i = 0; i < docs.length; i++) {
if (docs[i].specificValue == otherValue) {
let newValue = docs[i];
tempList.push(newValue);
}
}
return tempList;
}
}
});
с вспомогательным объектом
Ractive.defaults.data.helper = function () {
for (var i = 0; i < docs.length; i++) {
if (docs[i].specificValue == otherValue) {
return docs[i].whatever ;
}
}
}
new Ractive({
el: '#container',
template: '{{helper()}}',
magic: true,
modifyArrays: true,
data: {List: docs}
});
и функция данных, как описано в вычисляемом свойстве Ractive
Но ничто не сработало так, как ожидалось. Когда я использую документы напрямую, привязка работает как положено.
PS: код может выглядеть немного неловко, потому что я просто скопировал и упростил.
1 ответ
Ractive опирается на наличие this.get()
знать, от каких данных зависит вычисление.
При этом свойство области может рассматриваться как любое другое. Он будет обновляться реактивно (поскольку вызовы ractive.get() сообщают Ractive, что его следует пересчитать при изменении ширины или высоты), так что вы можете сделать...
В вашем примере вы получаете доступ docs
непосредственно. Ractive не будет знать, что docs
это зависимость List
,
Вот сравнительный пример использования списка this.get()
против того, который не:
var arr = [0, 1, 2, 3];
new Ractive({
el: 'body',
template: `
<div>Working: {{# workingList }}{{.}}{{/}}</div>
<div>Not working: {{# nonWorkingList }}{{.}}{{/}}</div>
`,
magic: true,
modifyArrays: true,
data: {
list: arr
},
computed: {
workingList() {
return this.get('list').map(n => `#${n}`);
},
nonWorkingList() {
return arr.map(n => `#${n}`)
}
}
});
setInterval(() => {
arr.push(arr.length);
}, 1000);
<script src="https://unpkg.com/ractive@0.8.9/ractive.min.js"></script>