Javascript 使用余烬数据保存时在所有项目上复制数据

我有一个页面，用户编辑上传的照片，并使用余烬数据为模型上的单个照片应用标记。但是，在控制器上保存并转换到包含列出的所有照片的页面后，标签将显示在所有项目上，并替换以前存在的任何项目。如果我重新打开页面，标签根本没有保存

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

//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>

//照片模型
App.Photo=DS.Model.extend({
标题：attr（），
描述：attr（），
image:attr（），
宽度：attr（），
高度：attr（），
重要提示：attr（），
重要提示：attr（），
重要提示：attr（），
重要提示：attr（），
已创建：attr（'date'），
作者：hasMany（“作者”），
应用程序数据：{
标签：[]
},
imageURL:function（）{
返回document.location.origin+'/media/'+this.get（'image'）；
}.property（“图像”），
});
//照片编辑路线
App.photoeditRoute=Ember.Route.extend({
模型：函数（）{
this.store.find（'photo'）；
//使用从最低上传ID到最高上传ID的照片填充模型。
返回此.store.filter（'photo'，函数（图像）{
返回image.get（'id'）>=App.Upload.uploadeImage[0]；//从上传程序获取数据
});
},
激活：函数（）{
$（'页面标题'）.text（'编辑照片'）；
},
});
//照片编辑控制器
App.photoeditcontroller=Ember.ObjectController.extend({
parsedTags:function（）{
//从视图的输入字段中获取标记
var tagData=this.get（'app_data'）.tags；
//将标记转换为数组
返回tagData.join（'，'）；
}.property（“应用程序数据”），
//观察已解析的数据标记，并在转换时将数组应用于模型
parsedDataChanged:函数（）{
run（这个，函数（）{
this.get（'app_data'）.tags=this.get（'parsedTags'）.split（'，'）；
});
}.obsers（'parsedTags'），
行动：{
保存：函数（）{
var=这个；
.get（'model'）.save（）.then（函数）（成功）{
那条路线（“照片”）；
});
}
}
});
//照片编辑模板
编辑照片元数据
拯救一切
标题
描述
{{{#content itemController='PhotoEdit'}中的每个对象
{{input title valueBinding=“title”}
{{input description valueBinding=“description”}
{{input parsedTags valueBinding=“parsedTags”}
{{else}
还没有照片。
{{/每个}}

调用save（）并从那里回溯时，需要检查是否使用正确的数据调用了存储

---

除此之外，ParsedTag和parsedDataChanged似乎相互引用。

问题来自于您声明应用程序数据的方式。此变量将在

App.Photo

的所有实例中共享，这解释了为什么所有照片都具有相同的标记

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

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

而不是

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

---

查看此JsBin以获取突出问题和解决方案的示例

这并不能真正回答我的问题。您介意详细说明吗？您的问题缺少整个上下文（所有控制器、路由、模型和模板），因此不可能只给您一个简单的答案并指出问题所在。在这些情况下，jsbin确实非常方便。根据您的解释，答案是一个很好的调试过程。如果你想分享更多，它将更有可能帮助你：）正如@JulianLeviston所提到的，您对

parsedTags

和

parsedDataChanged

的实现存在缺陷。我应该如何以不同的方式实现parsedTags和parsedDataChanged？我可能会使用单个计算属性来实现标记并将其连接到模板。检查一下：当重写init时，您真的应该养成调用它的习惯；在函数中执行任何其他操作之前。这非常有效。谢谢你的帮助。我发现，当我执行

that.get（'model'）.save（）时，标记根本没有保存。您认为这是因为我正在定义标记，然后尝试创建实例服务器端吗。有没有更好的方法来处理这样的实例？太好了！它没有保存，因为您没有告诉余烬数据序列化它们（即：用
DS.attr | belongsTo | hasMany
声明它）。