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

Question

我使用对象数组作为我的 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 computed property中描述的数据函数

但没有任何事情能按预期进行。当我直接使用文档时，绑定按预期工作。

PS：代码可能看起来有点别扭，因为我只是复制和简化。

Answer 1

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

有了这个， area 属性可以像其他任何属性一样处理。它会响应式更新（因为对 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>