Ember 本地存储适配器在我刷新时有不同的数据

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

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

您需要：

将新专辑设置为歌曲的专辑属性 - song.set('album', newAlbum)
保存这首歌的旧专辑 如果有可以从 oldAlbum.songs
保存歌曲：将song.album属性持久化到后端
保存歌曲的新专辑：将更新的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 与什么是生活相关联——不要让它让您失望。

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

Ember 本地存储适配器在我刷新时有不同的数据

Ember localstorage adapter has different data when I refresh

local-storage

ember.js

ember-data