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与What Is Life相关联 - 不要让它让你失望。

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

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

1 个答案: