2013-05-10 22 views
9

Ứng dụng Ember có thể nhận biết trạng thái mạng không? Nếu có: Làm thế nào tôi có thể nhận được thông tin nếu ứng dụng có quyền truy cập Internet hay không? Tôi muốn chuyển đổi các phần tử GUI tùy thuộc vào khả năng truy cập mạng.Hiển thị chế độ trực tuyến và ngoại tuyến (ví dụ: máy bay) trong Ứng dụng Ember.js

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

Trả lời

18

Ngắn:

Kể từ khi bạn yêu cầu một ứng dụng ember Tôi đã dành một thời gian để cung cấp một câu trả lời chấp nhận được. Đây là số jsbin đang hoạt động.

Các dài:

tôi thêm ở đây một số mã, cho mã hoàn chỉnh hãy nhìn vào jsbin cung cấp.

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> 

Lưu ý: Tôi đã sử dụng js lib heyoffline.js vì nó là một trong những tốt nhất xung quanh IMO. Tôi cũng đã overriden các chức năng hiển thị một cửa sổ phương thức (hiển thị của lib cho mỗi cửa sổ mặc định khi ngoại tuyến xảy ra, nhưng vì chúng ta sẽ kiểm soát nó trough ứng dụng ember của chúng tôi nó không cần thiết), để lấy lại nó chỉ cần loại bỏ nguyên mẫu 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({}); 

Để kiểm tra rằng nó hoạt động, nạp jsbin và đi offline, xem làm thế nào Trạng thái trong mẫu thay đổi, trở lại trực tuyến để xem nó thay đổi một lần nữa.

Với thiết lập này ở nơi bạn sẽ nhận được trực tuyến/tình trạng ẩn của trình duyệt cách ember, thưởng thức :)

Hy vọng nó giúp

+0

Bingo! Cảm ơn bạn. – wintermeyer

+0

Gern geschehen (bạn được chào đón) :) – intuitivepixel

4

Với HTML5, bạn có thể kiểm tra tình trạng boolean navigator.onLine.

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

Nếu bạn cần phải lắng nghe cho đi offline hoặc online, bạn có thể xử lý các offlineonline sự kiện của window. Lưu ý rằng trong IE, sự kiện được nâng lên cho document.body, không phải window.

Tài liệu tham khảo:

+0

Làm thế nào tôi có thể thực hiện điều đó trong một ứng dụng Ember? – wintermeyer

+0

@ wintermeyer Tôi thực sự không chắc chắn - tôi chưa bao giờ làm việc với nó. Nhưng bất cứ khi nào bạn cần biết liệu máy tính có trực tuyến hay không, chỉ cần kiểm tra giá trị 'navigator.onLine' và thực hiện điều gì đó dựa trên – Ian

+0

@wintermeyer Nếu bạn có thể giải thích chính xác cách bạn đang sử dụng nó bằng ứng dụng Ember, tôi có thể cố gắng giúp đỡ. Nhưng nó có vẻ khá đơn giản - chỉ cần kiểm tra các tài sản, hoặc ràng buộc người nghe đến các sự kiện cụ thể phát hiện offline/online – Ian

Các vấn đề liên quan