如何将返回的数据添加到现有模板

时间:2017-05-11 21:29:19

标签: javascript ember.js model ecmascript-6

我正在使用余烬。我拦截了控制器中一个组件的按钮单击。单击是触发新的报告请求。当发出新的报告请求时,我希望新发出的请求出现在我当前显示的请求列表中。如何使ember刷新页面而没有明显的闪烁?

这是我的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);
    }
  });
}

1 个答案:

答案 0 :(得分:0)

很少有人认为你应该考虑。通常,您希望拥有一个变量,该变量包含您在循环中在模板中呈现的数组。例如:您在路由中获取初始数据集并将其作为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 的Boilerplate

您可以轻松地重构代码并使用ember-concurency。检查他们的文档,有适合你的用例的例子。