Wyświetlanie trybu online i offline (np. Samolotu) w aplikacji Ember.js

Question

Czy aplikacja Ember może być świadoma stanu sieci? Jeśli tak: w jaki sposób mogę uzyskać informacje, czy aplikacja ma dostęp do internetu, czy nie? Chciałbym zmienić elementy GUI w zależności od dostępności sieci.

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

Krótka:

Ponieważ poprosiłeś dla aplikacji ember Mam dedykowany trochę czasu, aby zapewnić dopuszczalna odpowiedź. Oto działa jsbin.

Długi:

dodam tutaj niektóre z kodem, na kompletnego kodu proszę spojrzeć na jsbin usług.

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> 

Uwaga: Użyłem js lib heyoffline.js, ponieważ jest to jeden z najlepszych wokół IMO. Przesłoniłem także funkcje, które pokazują okno modalne (domyślnie pokaz jest domyślnym oknem modalnym, gdy nie ma połączenia z Internetem, ale ponieważ będziemy kontrolować to za pomocą naszej aplikacji ember, nie jest to konieczne), aby odzyskać go, po prostu usuń prototyp 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({}); 

Aby sprawdzić, czy to działa, załaduj jsbin i przejdź do trybu offline, zobaczyć jak w zmianach stanu szablonów, wróć on-line, aby zobaczyć go ponownie zmienić.

Przy tej konfiguracji w miejscu powinieneś dostać/offline status online w przeglądarce drodze Ember, cieszyć :)

Nadzieja pomaga

Answer 2

HTML5, można sprawdzić stan logiczny navigator.onLine.

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

Jeśli trzeba nasłuchiwać będzie w trybie offline lub online, można obsługiwać offline i online wydarzenia window. Zauważ, że w IE zdarzenie jest zgłaszane dla document.body, a nie dla window.

Referencje:

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