如何在jsViews中从视图获取干净数据？

问题场景 #

我在视图中拥有如下数据：

let data = {
  selectedEntry: 0,
  selectedMessage: 1,
  roles: roles,
  entries: [{messages: [...]}, {messages: [...]}, ...]
};

通过以下处理函数修改data.entries：

removeEntry: function(i) {
  $.observable(this.entries).remove(i);
},
removeMessage: function(i, j) {
  $.observable(this.entries[i].messages).remove(j);
},

同时设置了一个观察者，每次数据修改时触发，用来获取更新后的数据并保存给其他脚本使用：

$.observe(data, "entries", function(ev, eventArgs, newTagCtxs){
  $('#root-selector-here').data("entries", data.entries);
});

但我发现data.entries里不仅包含我的数据，还有jsViews添加的jQuery对象，我只需要干净数据，该如何获取？有没有专门的方法？

解决方案 #

jsViews提供了几种直接获取纯净数据的方式，不用手动清理，这里列三种实用方法：

方法1：通过视图对象提取纯净数据 #

利用$.view()方法获取绑定的视图实例，再通过其data属性拿到原始纯净数据：

$.observe(data, "entries", function(ev, eventArgs, newTagCtxs){
  const cleanData = $.view('#root-selector-here').data;
  $('#root-selector-here').data("entries", cleanData.entries);
});

方法2：JSON序列化剥离额外属性 #

如果不想依赖视图对象，可以用JSON序列化再反序列化的方式，自动剔除不可枚举的额外对象：

$.observe(data, "entries", function(ev, eventArgs, newTagCtxs){
  const cleanEntries = JSON.parse(JSON.stringify(data.entries));
  $('#root-selector-here').data("entries", cleanEntries);
});

方法3：使用$.observable的data()方法 #

针对被$.observable包装过的数组或对象，直接调用data()方法就能获取原始纯净数据：

$.observe(data, "entries", function(ev, eventArgs, newTagCtxs){
  const cleanEntries = $.observable(data.entries).data();
  $('#root-selector-here').data("entries", cleanEntries);
});

内容的提问来源于stack exchange，提问作者Portnyagin Mikhail