Ember.jsアプリケーションでオンラインとオフライン（例：飛行機）モードを表示

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 HTML5で

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> 

注：それはIMO周りの最高の一つですので、私はheyoffline.js libにJSを使用しました。 私はモーダルウィンドウを表示する関数もオーバーライドしています（オフラインではデフォルトのモーダルウィンドウがデフォルトですが、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をロードして、オフラインに、テンプレートの変更でどのようにステータスを参照するには、それが再び変更見にオンラインに戻ります。ブラウザ燃えさし道のオンライン/オフラインの状態を取得する必要があります代わりに、この設定で

、:)

はそれが

Answer 2

、あなたはnavigator.onLineブール状態を確認することができます。あなたがオフラインまたはオンラインに行くをリッスンする必要がある場合は

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

は、あなたがwindowのofflineとonlineイベントを処理することができます。 IEでは、windowではなく、document.bodyのイベントが発生することに注意してください。

参考文献：

• https://developer.mozilla.org/en-US/docs/DOM/window.navigator.onLine
• https://developer.mozilla.org/en-US/docs/Online_and_offline_events