Question

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

我尝试了方法：

 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

中描述的数据函数

但没有任何预期的方式。当我直接使用docs时，绑定按预期工作。

PS：代码可能看起来有点尴尬，因为我只是复制并简化了。

Answer 1

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

这样，区域属性可以像任何其他属性一样对待。它会被动地更新（因为对ractive.get（）的调用告诉Ractive在宽度或高度改变时应该重新计算它），所以你可以做...

在您的示例中，您直接访问docs。 Ractive不会意识到docs是List的依赖关系。

以下是使用this.get()与不使用{+ 1}}的列表的比较示例。

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数组正在改变，但不是计算值

1 个答案: