ember.js - Ember js在窗口卸载之前保存数据

Question

我想在用户离开页面之前保存用户进度。在 Ember.js (v 1.0.0-pre.4) 中执行此操作的最佳方法是什么？

在纯 JQuery 中，它看起来像：

  $(window).unload(function() { 
    ajaxSaveUserProgress();
    return true;
  });

在 Ember 中，我试图做这样的事情：

  Exam.TestView = Ember.View.extend({

    unload: function(event){
      controller.ajaxSaveUserProgress(); // call controller method
      console.log('UNLOADED'+get(this, 'controller.test'));
    }
 });

Answer 1

就我个人而言，我会将此代码放在 中ApplicationRoute，因为我相信ApplicationRoute'setupController仅在应用程序首次初始化时执行一次。您必须仔细检查这一点，但这是我的理解。

我已经注释掉了您想要的代码，因为我还演示了如何将 AJAX 请求设置为同步，否则窗口将关闭并且您的 AJAX 请求不会完成。我们自然需要在窗口关闭之前等待它完成。

App.ApplicationRoute = Ember.Route.extend({
    setupController: function() {
//        var controller = this.controllerFor('foo');
//        controller.ajaxSaveUserProgress();

        jQuery(window).on('unload', function() {
            jQuery.ajax({ type: 'post', async: false, url: 'foo/bar.json' });
        });
    }
});

请忽略我的jQuery而不是$（个人喜好！）

Answer 2

Ember 现在有一个标准的方法来处理这个问题。 从文档：

App.FormRoute = Ember.Route.extend({
  actions: {
    willTransition: function(transition) {
      if (this.controller.get('userHasEnteredData') &&
          !confirm("Are you sure you want to abandon progress?")) {
        transition.abort();
      } else {
        // Bubble the `willTransition` action so that
        // parent routes can decide whether or not to abort.
        return true;
      }
    }
  }
});