10

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

索引.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>

应用程序.js

App = Ember.Application.create();
4

2 回答 2

18

短：

由于您要求使用ember 应用程序，因此我花了一些时间来提供可接受的答案。这是工作jsbin。

长：

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

索引.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 应用程序控制它，所以不需要它），只需删除原型即可恢复它覆盖。

应用程序.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并下线，查看模板中的状态如何变化，再次上线以查看它的变化。

完成此设置后，您应该以 ember 方式获得浏览器的在线/离线状态，享受 :)

希望能帮助到你

于 2013-05-19T14:19:07.030 回答
5

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

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

如果需要监听下线或上线，可以处理 的offline和online事件window。请注意，在 IE 中，该事件是针对 引发的document.body，而不是针对window.

参考：

于 2013-05-10T20:09:32.507 回答