活性数组正在改变，但不是计算值

Question

我使用一个对象数组作为我的 ractive 组件（从 PouchDB 接收）的数据，它需要在 ractive 内部进行过滤以获得正确的输出。但是我尝试过的任何东西——即使被称为 "docs" 的数据被正确更改，过滤后的又名计算值保持不变。

我试过方法：

 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 computed property

中描述的数据函数

但没有任何效果像预期的那样。当我直接使用文档时，绑定会按预期工作。

PS: 代码可能看起来有点笨拙，因为我只是复制和简化。

Answer 1

Ractive relies on the presence of this.get() 知道计算所依赖的数据。

With this, the area property can be treated like any other. It will update reactively (because the calls to ractive.get() tell Ractive that it should be recomputed when width or height change), so you can do...

在您的示例中，您正在直接访问 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>

活性数组正在改变，但不是计算值

ractive array is changing, but not computed value

ractivejs