mardi 11 août 2015

Ember app libraries initialization does not work

We've got an Ember app and need to do some library initialization when rendering some templates.

  1. Google+, Facebook and Twitter APIs for widgets. We do the initialization inside the application route, as well as inside each template that contains those specific widgets, for the use case when the user lands on that page directly. The problem is that Facebook and Twitter do not initialize at all when coming from another route. Google+, however, does. Also, if we refresh the page on which all 3 widgets reside, they all render correctly. The example below is a route called blog which also returns a model from the server API.

    renderTemplate: function ()
              {
                this._super();
    
                // initialize side nav drawer
                Ember.$(document).ready(function ()
                                        {
                                          Ember.$('.button-collapse').sideNav();
                                          Ember.$('select').material_select();
                                        });
    
    
                // load Google+ SDK
                Ember.$.getScript("http://ift.tt/1xN9CxI");
    
                // 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 Twitter API
                window.twttr = (function (d, s, id)
                {
                  var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {};
                  if (d.getElementById(id))
                  {
                    return t;
                  }
                  js     = d.createElement(s);
                  js.id  = id;
                  js.src = "https://platform.twitter.com/widgets.js";
                  fjs.parentNode.insertBefore(js, fjs);
    
                  t._e    = [];
                  t.ready = function (f)
                  {
                    t._e.push(f);
                  };
    
                  return t;
                }(document, "script", "twitter-wjs"));
              }
    
    
  2. Materialize side drawer (http://ift.tt/1ASonEP). We need to initialize this globally, as it will be used when the user access the website from a smartphone or tablet. The problem here is that on routes which return models from our server API, the side drawer doesn't work, even though we do the initialization inside the application route, after the template is rendered. Why isn't it working on routes with models?

                     renderTemplate: function ()
              {
                this._super();
                Ember.$(document).ready(function ()
                                        {
                                          Ember.$('.button-collapse').sideNav();
                                          Ember.$('select').material_select();
                                        });}
    
    

Aucun commentaire:

Enregistrer un commentaire