javascript - 处理 aurelia 中的集合更新

Question

我正在努力寻找处理 Aurelia 中集合更新的最佳方式。想象一下，我有一个 View (带有评论的新闻列表)，它是使用来自以下模型的一组 repeat.fors 构建的:

var news = [
    {
        id: 1,
        title: 'Some title',
        comments : ['comment1']
    },
    {
        id: 2,
        title: 'Some title',
        comments : ['comment1']
    },
    {
        id: 3,
        title: 'Some title',
        comments : ['comment1']
    }    
];

我还使用 setInterval() 创建了计时器，它每秒获取新闻列表。现在想象以下新闻列表返回:

var freshNews = [
    {
        id: 1,
        title: 'Some title',
        comments : ['comment1', 'comment2']
    },
    {
        id: 2,
        title: 'Some title',
        comments : ['comment1']
    }
];

如果我在 repeat.for 中使用这个 freshNews 列表，它将重建显示新闻的整个 DOM，导致闪烁和用户输入的数据丢失(假设每个新闻下面是用于输入评论的文本区域)。

我如何处理这个场景？这在 Angular 中工作得很好，这要归功于它的脏检查和 ngRepeat 的工作方式(angular 不会破坏对应于未更改的对象的 DOM)，在 React 中它也将工作得很好，这要归功于 shadow DOM。

我如何在 Aurelia 中处理这种情况？

Answer 1

问题实际上不是关于集合的。这是一个一般的JS问题。 How to duplicate object properties in another object?

所以你实际上可以很好地处理它。

您可以:

iterate over your updates {
   find a relevant object in news
   if there is none { 
      just push the new one to collection
   }
   otherwise {
      apply new values to the old one
   }
}

即使您将编辑器绑定(bind)到同一个对象 - 它也不会破坏用户评论。

freshNews.forEach(n=>{

    let update = news.find(o=>o.id==n.id)
    if (!update) {
        news.push(n)
    }
    else {
        Object.assign(update,n)
    }
})