Question

我有一个IndexRoute和一个PricingRoute，两者都在使用plan模型，以便从JSON API中检索计划列表。模型加载得很好，那里没有问题。

我还在Google+ SDK页面上添加了index.html。此外，Materialize CSS库包含通过application controller内的Javascript初始化的side-nav。

问题在于，无论何时刷新/最初加载这两条路线中的任何一条，都不会显示Google+关注小部件，并且Materialize侧导航无法正常工作（可能是JS初始化无效）。但是，如果我只删除路线上的模型（以2中的任何一个为准），则Google+小部件和Materialize侧导航按预期工作。那么路线模型究竟出了什么问题呢？它会干扰Google+和Materialize库？

值得注意的是，我还在应用程序控制器中的侧面导航之前初始化了Facebook lib，但即使对于模型也可以正常工作。

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 route：

export default Ember.Route.extend({

  model: function ()
  {
    return this.store.find('plan');
  }
});

pricing.js route：

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>

Answer 1

首先，在控制器中初始化那些与视图相关的内容在概念上是错误的。

除非你这样做，否则不建议以这种方式覆盖init方法。实际上你缺少给父母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做的那样。

灰烬路线模型阻止javascript

1 个答案: