如何將返回的數據添加到現有模板

Question

我正在使用餘燼。我攔截一個組件的按鈕在控制器中單擊。點擊是爲了觸發新的報告請求。當發出新的報告請求時，我希望新發出的請求出現在我目前顯示的請求列表中。如何讓燼刷刷新頁面而沒有明顯的閃爍？

這裏是我的sendAction代碼：

actions: { 
    sendData: function() { 
    this.set('showLoading', true); 

    let data = { 
    startTime: date.normalizeTimestamp(this.get('startTimestamp')), 
    endTime: date.normalizeTimestamp(this.get('endTimestamp')), 
    type: constants.ENTERPRISE.REPORTING_PAYMENT_TYPE 
    }; 

    api.ajaxPost(`${api.buildV3EnterpriseUrl('reports')}`, data).then(response => { 
    this.set('showLoading', false); 
    return response.report; 
    }).catch(error => { 
    this.set('showLoading', false); 
    if (error.status === constants.HTTP_STATUS.GATEWAY_TIMEOUT) { 
     this.notify.error(this.translate('reports.report_timedout'), 
this.translate('reports.report_timedout_desc')); 
    } else { 
     this.send('error', error); 
    } 
    }); 
} 

Answer 1

很少有想你應該考慮的問題。通常你想擁有一個變量來存放你在循環模板中渲染的數組。例如：您獲取路線中的初始數據集並將其作爲model變量傳遞。

// route.js 
model() { return []; } 

// controller 
actions: { 
    sendData() { 
     foo().then(payload => { 
      // important is to use pushObjects method. 
      // Plain push will work but wont update the template. 
      this.get('model').pushObjects(payload); 
     }); 
    } 
} 

這將自動更新模板並在列表中添加其他項目。

樣板爲 showLoading

您可以輕鬆地重構你的代碼，並使用ember-concurency。檢查他們的文檔，afair有適合你的用例的例子。