Question

Ember应用程序可以了解网络状态吗？如果是：如果应用程序可以访问互联网，我如何获取信息？我想根据网络可访问性切换GUI元素。

的index.html

<script type="text/x-handlebars">
  Status:
  {{#if isOffline}}
    Offline
  {{else}}
    Online
  {{/if}}
  <hr>

  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h2>Hello World</h2>
</script>

app.js

App = Ember.Application.create();

Answer 1

简短：

由于您要求余烬应用，我花了一些时间来提供可接受的答案。这是工作jsbin。

长：

我在这里添加了一些代码，完整代码请查看提供的jsbin。

<强>的index.html

<script type="text/x-handlebars">
  Status:
  {{#if App.isOffline}}
    <span class="offline">Offline</span>
  {{else}}
    <span class="online">Online</span>
  {{/if}}
  <hr>

  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h2>Hello World</h2>
</script>

注意：我使用过js lib heyoffline.js，因为它是IMO最好的之一。我还覆盖了显示模态窗口的函数（当脱机发生时，lib show默认为模态窗口，但是因为我们将通过我们的ember应用程序来控制它，所以不需要它），只需删除原型overiddes。

<强> app.js

// overrides to not show the default modal window, to get it back just remove this overrides
Heyoffline.prototype.showMessage = function() {
  //this.createElements();
  if (this.options.onOnline) {
    return this.options.onOnline.call(this);
  }
};

Heyoffline.prototype.hideMessage = function(event) {
  if (event) {
    event.preventDefault();
  }
  //this.destroyElements();
  if (this.options.onOffline) {
    return this.options.onOffline.call(this);
  }
};


//ember app
var App = Ember.Application.create({
  isOffline: false,
  service: null,
  ready: function(){
    this.set('service', App.HeyOffline.create());
  }
});

// Heyoffline wrapper
App.HeyOffline = Ember.Object.extend({
  service: null,
  init: function(){
    // heyoffline instantiation
    this.set('service', new Heyoffline());
    // hook into the two important events
    this.set('service.options.onOnline', this.offline);
    this.set('service.options.onOffline', this.online);
  },
  online: function(){
    App.set('isOffline', false);
    console.log("online");
  },
  offline: function(){
    App.set('isOffline', true);
    console.log("offline");
  }
 });

 App.ApplicationRoute = Ember.Route.extend({});

要测试它是否有效，请加载jsbin并离线，查看模板中的状态如何更改，然后重新联机以再次更改。

有了这个设置，您应该获得浏览器的在线/离线状态，享受：）

希望有所帮助

Answer 2

使用HTML5，您可以检查navigator.onLine布尔状态。

if (navigator.onLine) {
    // Online
} else {
    // Offline
}

如果您需要倾听离线或在线状态，您可以处理offline的{{1}}和online事件。请注意，在IE中，事件的引发时间为window，而不是document.body。

参考文献：

在Ember.js App中显示在线和离线（例如飞机）模式

2 个答案: