如何确定我的活跃计算值是否已更改

Question

对于我的布局，我有一个组件需要在渲染完成后进行初始化，然后在我的数据发生任何变化时再次进行初始化。

这会很好用，但我依赖计算值来为每个客户端过滤和更改输出，并且通过 observe 经常触发更改事件。我的工作：

let myRactive = new Ractive({
    el: '#clientContainer',
    template: myTemplate,
    magic: true,
    modifyArrays: true,
    data: {data}, //=> this is an awful lot of Data changing all the Time
    computed: {
        usefulData(){
           let tempdata = this.get('data');
           //=> a lot of rearranging, filtering and sorting 
           //   to adapt the data only for this specific client
           return tempdata;
        }
   onrender: function () {
        initmyLayoutComponent()
    }
    });

所以我试着这样弄

myRactive .observe( 'usefulData', function ( newValue, oldValue, keypath)
    destroymyLayoutComponent();
    initmyLayoutComponent();
});

但这会触发 a) 每当 data 中的 任何东西 发生变化时（即使它与 usefulData 完全无关），以及 b) 之前ractive 已经渲染了 DOM 所以组件会提前重新初始化。

有没有办法只观察计算值，或者 - 这会更好 - 只观察计算值中的特定动作（比如我想对 added/deleted 对象做出反应，但不改变值）？

Answer 1

好吧，您可以做的是实际将 clientData obj 发送到模板中，然后只收听该数据。

let myRactive = new Ractive({
  el: '#clientContainer',
  template: '<div>{{clientData.name}}</div><input type="text" value="{{clientData.name}}" /><div>{{email}}</div><input type="text" value="{{email}}" /><div>Clientdata changed: {{cnt}}</div>',
  magic: true,
  modifyArrays: true,
  data: {
    name: 'hallo',
    email: 'a@a.com',
    cnt: 0
  }, //=> this is an awful lot of Data changing all the Time
  computed: {
    usefulData() {
      let tempdata = this.get('name');
      // Create your own data obj
      tempdata = {
        name: 'world'
      };
      // set it to the ractive context
      this.set('clientData', tempdata);
    }
  },
  oninit: function() {
    this.observe('clientData', function(newValue, oldValue, keypath) {
      let cnt = this.get('cnt')
      cnt += 1;
      this.set('cnt', cnt);
      console.log('listen only to the computed data');
    }, {init: false});
    this.get('usefulData');
  },
  onrender: function() {
    // do something
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.9.0-build-123/ractive.min.js"></script>
<div id="clientContainer"></div>

如何确定我的活跃计算值是否已更改

how to determine if my ractive computed value has changed

javascript

ractivejs