Ember 路线模型块 javascript
Ember route model blocks javascript
我有一个 IndexRoute
和一个 PricingRoute
,两者都使用 plan
模型以便从 JSON [=53= 中检索计划列表].模型加载正常,没有问题。
我还在 index.html
页面上添加了 Google+ SDK
。此外,Materialize
CSS 库带有通过 application controller
.
中的 Javascript 初始化的侧边导航。
问题是每当我 refresh/initially 加载这两条路线中的任何一条时, Google+ 跟随小部件不显示并且 Materialize 侧导航不工作(可能是 JS init 没有' 工作)。但是,如果我只是删除路线上的模型(以 2 中的哪一个为准),Google+ 小部件和 Materialize 侧导航都会按预期工作。那么路由模型到底出了什么问题,它会干扰 Google+ 和 Materialize 库?
值得注意的是,我还在应用程序控制器中的侧导航之前初始化了 Facebook 库,但即使使用模型也能正常工作。
application.js 控制器:
export default Ember.Controller.extend({
init: function ()
{
// initialize facebook SDK
var facebook_id = this.facebook_app_id;
window.fbAsyncInit = function ()
{
FB.init({
appId: facebook_id,
xfbml: true,
version: 'v2.1'
});
};
(function (d, s, id)
{
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
{
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// load side nav drawer
Ember.$(document).ready(function ()
{
Ember.$('.button-collapse').sideNav();
});
}
});
index.js 路线:
export default Ember.Route.extend({
model: function ()
{
return this.store.find('plan');
}
});
pricing.js 路线:
export default Ember.Route.extend({
model: function ()
{
return this.store.find('plan');
}
});
index.html
<html>
<head>
...
<script src="https://apis.google.com/js/client:platform.js" async defer></script>
</head>
...
</html>
首先,在控制器中初始化那些视图相关的东西在概念上是错误的。
不建议以这种方式重写 init
方法,除非你做得对。其实你错过了打电话 parent init
.
export default Ember.Controller.extend({
init: function ()
{
this._super(); // missing
可能的问题是,您试图在插入视图之前初始化这些模块。特别是,由于模型调用是 async,因此控制器在插入视图之前完成 init 方法。
你应该做的是,
// assuming you use ember-cli
// views/application.js
import Ember from 'ember';
export default Ember.View.extend({
initLibs: function () {
// do your initialization here
}.on('didInsertElement')
});
我也更喜欢 google+ 的初始化,就像您对 Facebook 所做的那样。
我有一个 IndexRoute
和一个 PricingRoute
,两者都使用 plan
模型以便从 JSON [=53= 中检索计划列表].模型加载正常,没有问题。
我还在 index.html
页面上添加了 Google+ SDK
。此外,Materialize
CSS 库带有通过 application controller
.
问题是每当我 refresh/initially 加载这两条路线中的任何一条时, Google+ 跟随小部件不显示并且 Materialize 侧导航不工作(可能是 JS init 没有' 工作)。但是,如果我只是删除路线上的模型(以 2 中的哪一个为准),Google+ 小部件和 Materialize 侧导航都会按预期工作。那么路由模型到底出了什么问题,它会干扰 Google+ 和 Materialize 库?
值得注意的是,我还在应用程序控制器中的侧导航之前初始化了 Facebook 库,但即使使用模型也能正常工作。
application.js 控制器:
export default Ember.Controller.extend({
init: function ()
{
// initialize facebook SDK
var facebook_id = this.facebook_app_id;
window.fbAsyncInit = function ()
{
FB.init({
appId: facebook_id,
xfbml: true,
version: 'v2.1'
});
};
(function (d, s, id)
{
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
{
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// load side nav drawer
Ember.$(document).ready(function ()
{
Ember.$('.button-collapse').sideNav();
});
}
});
index.js 路线:
export default Ember.Route.extend({
model: function ()
{
return this.store.find('plan');
}
});
pricing.js 路线:
export default Ember.Route.extend({
model: function ()
{
return this.store.find('plan');
}
});
index.html
<html>
<head>
...
<script src="https://apis.google.com/js/client:platform.js" async defer></script>
</head>
...
</html>
首先,在控制器中初始化那些视图相关的东西在概念上是错误的。
不建议以这种方式重写 init
方法,除非你做得对。其实你错过了打电话 parent init
.
export default Ember.Controller.extend({
init: function ()
{
this._super(); // missing
可能的问题是,您试图在插入视图之前初始化这些模块。特别是,由于模型调用是 async,因此控制器在插入视图之前完成 init 方法。
你应该做的是,
// assuming you use ember-cli
// views/application.js
import Ember from 'ember';
export default Ember.View.extend({
initLibs: function () {
// do your initialization here
}.on('didInsertElement')
});
我也更喜欢 google+ 的初始化,就像您对 Facebook 所做的那样。