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 所做的那样。