当我刷新时，Ember localstorage 适配器有不同的数据

Question

我对 Ember 比较陌生，一直在努力构建一个简单的 CRUD 应用以用于学习目的。我正在使用 localstorage-adapter 来模拟后端。由于 Ember Inspector 在不同的页面上显示不同的数据，我的调试非常糟糕。

现在我拥有完整的 CRUD 功能，除了更新。假设我创建了一首新歌曲 (S1)，它是专辑 (A1) 的一部分。我可以将 S1 更改为属于另一个相册 (A2)，即使我刷新它也会保存并保留在本地存储中。

现在，如果我决定要将 S1 的相册改回 A1，它将保存并显示在显示页面上，但如果我刷新，相册将恢复为 A2。如果我去编辑页面，S1的专辑被列为A2。如果我在编辑页面上刷新，它会更改为 A1，但即使我单击保存，它也会在显示页面上显示 A1，但如果我刷新或返回编辑，它会返回 A2...我觉得这特别奇怪因为它确实在初始编辑尝试时正确保存（并在页面重新加载时持续存在）。无法正确保存是后续的编辑尝试。

一首歌有一个标题并且属于一个专辑。

歌曲控制器

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    updateValue(value) {
      this.set('model.song.newAlbum', value)
    },
    updateSong(model) {
      this.store.findRecord('song', model.get('id'))
        .then(song => {
          if (song.get('newAlbum')) {
            this.store.findRecord('album', song.get('newAlbum'))
              .then(album => {
                song.set('album', album);
                album.save();
              })
          }
        song.save();
      })
      .then(() => this.transitionToRoute('songs.show', model.get('id')));
    }
  }
});

Answer 1

为确保数据在后端（即本项目中的本地存储）正确保存，您需要对关系进行更多管理。

您需要：

1. 设置新专辑作为歌曲的专辑属性 - song.set('album', newAlbum)
2. 保存歌曲的旧专辑（如果有从 oldAlbum.songs 删除歌曲的专辑）
3. 保存歌曲：将song.album 属性持久化到后端
4. 保存歌曲的新专辑：将更新后的newAlbum.songs 持久化到后端

此外，我使用了RSVP Hash to return multiple models，因此您不必在函数中获取歌曲数据对象（已解析并为您传递给模型）

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return Ember.RSVP.hash({
      song: this.store.findRecord('song', params.song_id),
      albums: this.store.findAll('album')
    })
  },
  actions: {
    updateSong(song) {
      if (song.get('newAlbum')) {
        //  Get the current album's Ember object as 'oldAlbum'
        song.get('album').then((oldAlbum) => {
          // Then get the new album's Ember object as 'newAlbum'
          this.store.findRecord('album', song.get('newAlbum')).then(newAlbum => {
            // Set the song's album to the new album
            song.set('album', newAlbum);
            if (oldAlbum) {
              // Save the old album if it exists
              oldAlbum.save();
            }
            // Save the new album
            newAlbum.save();
            // Save the song
            song.save().then(() => {
              // Then transition to new route
              this.transitionTo('songs.show', song.get('id'))
            })
          })
        });
      }
    }
  }
});

最后，请注意，在您的 routes/application.js 中设置初始实体的推送仅推送到缓存而不是本地存储。有了这些，您将始终看到 Go Go Go 与 What Is Life 相关联——不要让它让您失望。

另外，请记住，您可以从开发人员工具中剪切和粘贴本地存储内容，以帮助调试其中的内容与 Ember 缓存。