Visualizzazione della modalità online e offline (ad esempio aereo) in un'app Ember.js

Question

Un'app Ember può conoscere lo stato della rete? In caso affermativo: come posso ottenere le informazioni se l'app ha accesso a Internet o no? Mi piacerebbe cambiare gli elementi della GUI in base all'accessibilità della rete.

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

La breve:

Poiché hai chiesto un app brace Ho dedicato un po 'di tempo per fornire un risposta accettabile. Ecco il lavoro jsbin.

Il lungo:

aggiungo qui una parte del codice, per il codice completo si prega di guardare il jsbin fornito.

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> 

Nota: Ho usato il js lib heyoffline.js dal momento che è uno dei migliori in circolazione IMO. Ho anche annullato le funzioni che mostrano una finestra modale (lo show lib è per impostazione predefinita una finestra modale quando offline, ma dal momento che lo controlleremo attraverso la nostra app embra non è necessario), per recuperarlo basta rimuovere il prototipo 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({}); 

Per verificare che funziona, caricare il jsbin e andare offline, vedere come lo stato nel modifiche apportate al modello, torna online per vederlo cambiare di nuovo.

Con questa impostazione in atto si dovrebbe ottenere l'online/offline del browser il modo brace, Enjoy :)

Speranza che aiuta

Answer 2

Con HTML5, è possibile controllare lo stato booleano navigator.onLine.

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

Se avete bisogno di ascoltare per andare offline o online, è possibile gestire il offline e online eventi di window. Si noti che in IE, l'evento viene generato per document.body, non window.

Riferimenti:

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