CODEWITHSUNDEEP
javascriptember.jsember-data
Bogdan Zurac
Bogdan Zurac

Reputation: 6451

Ember route model blocks javascript

I have an IndexRoute and a PricingRoute, both are using the plan model in order to retrieve a list of plans from a JSON API. The models load just fine, there's no problem there.

I also have the Google+ SDK added on the index.html page. Also, the Materialize CSS library with a side-nav that is initialized through Javascript inside the application controller.

The problem is that whenever I refresh/initially load either of those 2 routes, the Google+ follow widget is not showing and the Materialize side-nav is not working (probably the JS init didn't work). However, if I just remove the model on the route (whichever of the 2), both the Google+ widget and the Materialize side-nav work as intended. So what exactly is wrong with the route model that it makes it interfere with the Google+ and Materialize libs ?

Worth noting is that I also have the Facebook lib initialized before the side-nav in the application controller, but that works just fine even with the models.

application.js controller:

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>

Upvotes: 0

Views: 143

Answers (1)

code-jaff
code-jaff

Reputation: 9330

First of all, initializing those view related stuffs in the controller is conceptually wrong.

It's not recommended to override the init method this way unless you do it right. Actually you are missing to call parent init.

export default Ember.Controller.extend({

  init: function ()
  {
      this._super(); // missing

Possibly the issue was, you are trying to initialize those modules before the view is inserted. Particularly, since the model call is async, the controller finishes init method before view has been inserted.

What you should be doing is, 

// 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')    
});

I'd also prefer the initialization of google+, the same way as you did for Facebook.

Upvotes: 1

Related Questions