javascript - 使用 Ember-Data 保存时所有项目的数据重复

Question

我有一个页面，用户可以在其中编辑上传的照片并使用 Ember-Data 为模型上的单张照片应用标签。然而，在 Controller 上保存并转换到列出所有照片的页面后，标 checkout 现在所有项目上并替换之前存在的任何项目。如果我重新打开页面，标签根本没有保存。

我不太确定是什么导致了这个问题。任何帮助将不胜感激。

//The photo model
App.Photo = DS.Model.extend({
  title: attr(),
  description: attr(),
  image: attr(),
  width: attr(),
  height: attr(),
  important_top: attr(),
  important_left: attr(),
  important_bottom: attr(),
  important_right: attr(),
  created: attr('date'),
  authors: hasMany('author'),
  app_data: {
    tags: []
  },
  imageURL: function() {
    return document.location.origin + '/media/' + this.get('image');
  }.property('image'),
});


// Photo edit route
App.PhotoseditRoute = Ember.Route.extend({
  model: function() {
    this.store.find('photo');
    // Populate model with photos from the lowest upload ID to higest.
    return this.store.filter('photo', function(image){
      return image.get('id') >= App.Upload.uploadedImages[0]; // Get data from uploader
    });
  },
  activate: function() {
    $('#page-title').text('Edit Photos');
  },
});


// Photo Edit Controller
App.PhotoseditController = Ember.ObjectController.extend({

    parsedTags: function() {
      // Get tags from the view's input field
      var tagData = this.get('app_data').tags;

      // Convert tags to an array
      return tagData.join(',');

    }.property('app_data'),

    // Watch parsedTags and apply array to model when converted
    parsedDataChanged: function() {
      Ember.run(this, function() {
        this.get('app_data').tags = this.get('parsedTags').split(',');
      });
    }.observes('parsedTags'),

  actions: {
    save: function() {
      var that = this;

      that.get('model').save().then(function(success) {
        that.transitionToRoute('photos');
      });
    }
  }
});

// Photo edit template
<h2>Edit Photo Meta Data</h2>
<button {{action 'save'}} style="float:right;">Save All</button>
<table>
  <thead>
    <tr>
      <th></th>
      <th>Title</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    {{#each object in content itemController='photosedit'}}
    <tr>
      <td><img {{bind-attr src="imageURL"}} width="200" /></td>
      <td>{{input title valueBinding="title"}}</td>
      <td>{{input description valueBinding="description"}}</td>
      <td>{{input parsedTags valueBinding="parsedTags"}}</td>
    </tr>
    {{else}}
    <tr>
      <td colspan="6">No photos yet.</td>
    </tr>
    {{/each}}
  </tbody>
</table>

Answer 1

问题来自您声明 app_data 的方式。此变量将在 App.Photo 的所有实例之间共享，这解释了为什么您会看到所有照片都获得相同的标签。

您可以通过不同方式初始化属性来解决此问题:

App.Photo = DS.Model.extend({
  init: function() {
    this._super();
    this.app_data = { tags: [] };
  }
});

代替

App.Photo = DS.Model.extend({
  app_data = { tags: [] }
});

请参阅此 JsBin 以获取突出显示问题和解决方案的示例 http://emberjs.jsbin.com/wawoq/3