Ember.js: सॉर्ट किए गए ArrayController से कोई आइटम हटाना

Question

एम्बर ऐप में मैं बिल्ड कर रहा हूं, मुझे एक ऐरे कंट्रोलर मिला है जिसमें एक रिकॉर्ड बटन के साथ सरणी में प्रत्येक रिकॉर्ड ऑब्जेक्ट के लिए डेटा के कई कॉलम वाले आइटम की एक सूची प्रबंधित होती है। दृश्य में प्रत्येक कॉलम हेडर में। मैंने प्रति बैलिंट एर्डी की अनुशंसित विधि here पर दिए गए कॉलम को क्रमबद्ध करने के लिए सूची सेट अप की है। आप नीचे दिए गए मेरे कोड में इस सॉर्टिंग को देखेंगे।

सॉर्टिंग ठीक काम करता है। हालांकि, जब मैं सरणी से किसी आइटम को हटाता हूं तो समस्या उत्पन्न होती है। वर्तमान में, जब मैं सरणी से किसी आइटम को निकालने का प्रयास करता हूं, तो सही आइटम को सरणी से हटा दिया जाता है और स्टोर से ठीक से हटा दिया जाता है और हटाई मेरे बैकएंड में सहेजी जाती है। हालांकि, आइटम हटाने के बाद, मेरा विचार सही नहीं है। कुछ मामलों में, गलत आइटम को हटाए जाने के रूप में दिखाया जाता है, अन्य मामलों में, कोई आइटम हटाए जाने के रूप में नहीं दिखाया जाता है। फिर भी अगर मैं फिर से दबाता हूं, तो दृश्य सही ढंग से अपडेट किया जाता है।

तो, सरणी की अनुक्रमणिका स्पष्ट रूप से कुछ कैसे हो रही है, लेकिन मुझे यकीन नहीं है कि दूसरों के चालों को लागू करने के मेरे सभी प्रयास कैसे काम नहीं कर रहे हैं!

यहाँ मेरी मार्ग वस्तु है:

App.UsersFilesRoute = Ember.Route.extend({ 
    model: function() { 
     return this.modelFor('users').get('files'); 
     } 
    }); 

यहाँ मेरी ArrayController है:

App.UsersFilesController = Ember.ArrayController.extend({ 
    sortProperties: ['name'], 
    sortedFiles: Ember.computed.sort('model', 'sortProperties'), 
    actions: { 
     addFile: function(file) { 
     var newFile = this.store.createRecord('file', { 
      name: file.name.trim(), 
      fileSize: file.size, 
      loaded: false 
     }); 
     this.pushObject(newFile); 
     }, 
     sortBy: function (sortProperties) { 
     this.set('sortProperties', [sortProperties]); 
     }, 
     removeFile: function (fileToRemove) { 
     var _this = this; 
     var file = this.store.find('file', fileToRemove.get('id')); 
     file.then(function (file) { 
      _this.removeObject(file); 
      file.deleteRecord(); 
      file.save(); 
     }); 
     }, 
     saveFile: function (file) { 
     .... 
     } 
    } 
    }); 

और यहाँ मेरे टेम्पलेट कोड है:

<div class="hidden-xs row user-file-header-row"> 
    <div class="col-sm-5 col-md-5 user-file-header"> 
     File Name 
     <button type="button" class="btn-xs btn-default files-sort-btn" {{ action 'sortBy' 'name'}}></button> 
    </div> 
    <div class="col-sm-1 col-md-1 user-file-header"> 
     Size 
     <button type="button" class="btn-xs btn-default files-sort-btn" {{ action 'sortBy' 'fileSize'}}></button> 
    </div> 
    </div> 
    {{#each file in sortedFiles}} 
    <div class="row user-file user-file-break"> 
     <div class="col-xs-11 col-sm-5 col-md-5 user-file-name"> 
     <a {{ bind-attr href="file.path" }} >{{ file.name }} </a> 
     </div> 
     <div class="col-xs-9 col-sm-1 col-md-1"> 
     {{ format-file-size file.fileSize }} 
     </div> 
     <div class="col-xs-9 col-sm-1 col-md-1"> 
     <button type="button" class="btn-xs btn-default files-list-btn" {{ action 'removeFile' file }}></button> 
     </div> 
    </div> 
    {{/each}} 

नोट: वहाँ के बीच कुछ समानता है मेरा प्रश्न और यह अन्य स्टैक ओवरफ्लो प्रश्न: After using jQuery UI to sort an Ember.js item, using Ember Data's model.deleteRecord() doesn't work, हालांकि, मैंने टी का प्रयास किया है o लागू करें कि सफलता के बिना मेरी अपनी समस्या का उत्तर दें। इसके अलावा, मेरे पास सॉर्टिंग में कोई jQuery नहीं है।

Answer 1

ठीक है। मुझे एक जवाब मिला है, या बल्कि एक जवाब मुझे मिला है।

मेरी समस्या यह थी कि उपरोक्त कोड में मैं ArrayController से आइटम को हटा रहा था और फिर .delete() और .save() को कॉल कर रहा था। कॉल के इस अनुक्रम एम्बर को अपने विचार को अपडेट करने के तरीके पर विरोधाभासी संकेत भेज रहे थे। जाहिर है, .removeObject() वास्तव में सरणी से आइटम को हटा रहा था, लेकिन उसके बाद .delete() /। Save() दृश्य को पीछे छोड़ने से पहले मॉडल को दृश्य के पीछे सेट कर रहा था (इसके बारे में निश्चित नहीं है लेकिन यही वह है मैंने देखा)।

तो वैसे भी, .destroyRecord() एक वादा देता है, इसलिए मैंने वादे के लिए .then() के भीतर .removeObject() को स्थानांतरित किया, और यह समस्या हल करता है।

तो, removeFile कार्रवाई में निम्न कोड समस्या का समाधान हो:

removeFile: function() { 
    var self = this; 
    var fileToRemove = this.get('fileToRemove'); 
    var file = this.store.find('file', fileToRemove.get('id')); 
    file.then (function (file) { 
    file.destroyRecord().then(function(){ 
     self.get('model').removeObject(file); 
    }); 
    }); 
} 

ध्यान दें कि आप this.store.find करने के लिए() पहले की जरूरत नहीं है, तो आप बस निम्नलिखित कर सकता है:

removeFile: function() { 
    var self = this; 
    var fileToRemove = this.get('fileToRemove'); 
    fileToRemove .destroyRecord().then(function(){ 
    self.get('model').removeObject(file); 
    }); 
} 

हालांकि, मैंने रूढ़िवादी और स्टोर को दोबारा जांचना चुना। यह मेरे लिए सुरक्षित लगता है।