Ember-js网络连接检查在启动和侦听器

Question

首先，我知道这个问题，在Ember.js应用程序中显示在线和离线(例如飞机)模式，但这并不能解决我遇到的所有问题。这个问题的答案使用了Heyoffline.js，这是一个很棒的库(这就是JSbin使用的)，但它不会在Ember应用程序"启动"时检查连接状态，只有当我在使用该应用程序时关闭wifi时。我正在创建一个离线/在线兼容的Ember应用程序，我只需要知道启动时的状态，我需要完全控制"内脏"，即UI、视图等。Heyoffline.js为你做了太多。

简单地说，我需要启动一个Ember应用程序：

window.App = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_VIEW_LOOKUPS: true,
service: null,
isOffline: function() {
var networkCheck = navigator.onLine ? true : false;
return networkCheck;
},
ready: function() {
this.set('service', App.HeyOffline.create());
Ember.debug("App ready!");
}
});
App.HeyOffline = Ember.Object.extend({
service: null,
init: function() {
this.set('service', new Heyoffline({
noStyles: true,
prefix: "network",
text: {
title: "No Internet Connection",
content: "Your experience will be limited, it's suggested that you connect to the internet",
button: "Continue Anyway."
}
}));
this.set('service.options.onOnline', this.offline);
this.set('service.options.onOffline', this.online);
},
online: function() {
App.set('isOffline', false);
Ember.debug('Online');
},
offline: function() {
App.set('isOffline', true);
Ember.debug('Offline');
}
});
App.ApplicationRoute = Ember.Route.extend();

view.js

App.NetworkView = Ember.View.extend({
layoutName: "_network_error",
classNames: ['network-error', 'flash-message'],
classNameBindings: ['isHidden:hide:show'],
isHidden: true,
networkFail: function() {
var self = this;
console.log("Network Failure");
this.set('isHidden', false);
Ember.run.next(function() {
setTimeout(function(){
self.set('isHidden', true);
}, 3000);
});
},
didInsertElement: function() {
var self = this;
Ember.run.next(function() {
if(App.isOffline) { // <--- THIS ALWAYS RETURNS TRUE, doh
self.networkFail();
}
});
}
});

应用程序.hbs

{{outlet}}
{{outlet modal_dialog}}
{{outlet modal_status}}
{{outlet debug}}
{{#view App.NetworkView }} {{/view }}

我的申请还有很多内容，但我想我已经删除了所有相关的部分。我并不是说必须这样做，我唯一的要求是：

1. 必须在启动时检查并设置"something"，以便在需要时显示消息。我并不是说它必须推迟Readiness或其他什么，从用户体验/用户界面的角度来看，一旦应用程序"准备就绪"或运行循环结束，就会弹出消息
2. 我必须控制消息UI，它必须是"Emberized"，(我想的是一个视图或组件)，它将是从顶部元素向下滑动的(比如Facebook移动连接警告)
3. 必须有某种倾听者(如果我失去联系，我可以弹出小消息)-Heyoffline.js做得很好
4. 必须进行Emberized-必须以"ember方式"工作，可能是ember.Evented或一些Pub/Sub设置。我可以破解它，尽量不要那样做
5. 我希望它比windows更简单一点。onLine——它只真正检查你是否连接到局域网或路由器，而不是"真正"检查互联网
6. 我所处的环境非常特殊，特别是Webkit，我不需要IE或旧浏览器支持
7. 我没有其他预请求，我可以完全破坏我当前的设置

任何人想要分享的想法、建议或金块都将不胜感激。

Answer 1

一个问题是：

如果(应用程序处于脱机状态)｛//<---这总是返回真，doh

你应该把它作为一个函数来调用，而不仅仅是访问它。函数是一个真实的值，但你想要的是函数的结果。

现在，对于其余的功能。将其封装在服务上并使其可用于其他控制器/视图是有意义的。为了简单起见，我会将其作为ApplicationController的一部分。

App.ApplicationController = Ember.Controller.extend( {
isOnline: true,  // assume we're online until proven wrong
init: function () {
updateNetworkStatus();
},
updateNetworkStatus: function () {
var appController = this;
if (!navigator.onLine) {
this.set('isOnline', false);
return; // return early, no point in pinging the server if we have no LAN
}
Ember.$.get('myserver.com/status').done(function () {
// todo: consider checking the result
appController.set('isOnline', true);
}).fail(function () {
appController.set('isOnline', false);    
}).always(function () {
Ember.run.later(appController, 'updateNetworkStatus', 60000);
});
} 
});

我们仍然会检查navigator.online，但如果它是真的，我们不会认为我们一直连接到服务器。我们检查一下。一旦我们得到响应，我们就会更新标志，并每分钟更新一次。

从其他控制器，我们可以简单地向应用程序控制器添加依赖项。

App.OtherController = Ember.Controller.extend( {
needs: ['application'],
});

然后在属性中使用它，或者在执行某些操作之前将其用作检查：

App.OtherController = Ember.Controller.extend( {
needs: ['application'],
canEdit: function () {
return this.get('controllers.application.isOnline');
}.property('controllers.application.isOnline')
});

或者从您的角度来看

{{controllers.application.isOnline}}

希望这能有所帮助。正如我所说，我通常会将其封装到service中，然后将其注入控制器中，只是为了将这种类型的关注点从应用程序中移除，但这可能需要回答第二个问题。

希望这能帮助