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();
});

但是每当data中的任何更改时（即使它与usefulData完全无关），b）ractive渲染DOM之前，它就会激活a）所以组件重新初始化为早期。

有没有办法只观察计算出的值，或者 - 哪个更好 - 只是观察计算值中的特定动作（就像我想对添加/删除的对象做出反应，而不是更改值）？ / p>

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>

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

1 个答案: