使用Ember-Data保存所有項目時的數據複製

我有一個頁面，用戶使用Ember-Data編輯上傳的照片併爲模型上的各個照片應用標籤。但是，保存在控制器上並轉換到列出所有照片的頁面後，標籤將顯示在所有項目上並替換以前存在的任何項目。如果我重新打開頁面，標籤根本沒有保存。使用Ember-Data保存所有項目時的數據複製

我不太清楚是什麼導致了這個問題。任何幫助，將不勝感激。

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

來源

2014-03-12 Zach Shallbetter

問題來自您聲明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

來源

2014-03-20 20:22:06

重寫init時，你應該習慣於調用this._super（）;在你做任何其他的功能之前。 –

好點。我更新了代碼。 –

您的答案應被接受爲正確的答案。 –

當您調用save（）並從那裏回溯時，您需要檢查商店是否被調用了正確的數據。

除此之外，parsedTags和parsedDataChanged似乎是指對方。

來源

2014-03-17 04:52:03

這不真的回答我的問題。你介意闡述嗎？ –

你的問題是缺少整個上下文（所有控制器，路線，模型和模板），所以不可能給你一個簡單的答案，並指出發生了什麼問題。在這些情況下，jsbin確實非常方便。給出你解釋的內容，答案是一個很好的調試過程。如果你想分享更多，它將更有可能幫助你:) –

正如@JulianLeviston所提到的，你的'parsedTags'和'parsedDataChanged'的實現是錯誤的。 –

使用Ember-Data保存所有項目時的數據複製

回答

相關問題