10

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();
4

2 に答える 2

18

短い：

あなたがエンバーアプリを求めて以来、私は受け入れられる答えを提供するために時間を割いてきました. これが作業中の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 で最高の 1 つであるためです。また、モーダル ウィンドウを表示する関数もオーバーライドしました (lib ショーは、デフォルトではオフライン時にモーダル ウィンドウになりますが、ember アプリを使用して制御するので必要ありません)、元に戻すには、プロトタイプを削除するだけです。上書きします。

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をロードしてオフラインにし、テンプレートのステータスがどのように変化するかを確認し、オンラインに戻って再び変化することを確認します。

この設定が整っていれば、ブラウザのオンライン/オフラインのステータスを非常に簡単に取得できます。お楽しみください :)

それが役に立てば幸い

于 2013-05-19T14:19:07.030 に答える
5

navigator.onLineHTML5 では、ブール値のステータスを確認できます。

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

オフラインまたはオンラインになるのをリッスンする必要がある場合は、 のofflineおよびonlineイベントを処理できますwindow。IE では、イベントはdocument.bodyではなくに対して発生することに注意してくださいwindow。

参考文献:

于 2013-05-10T20:09:32.507 に答える