Question

我们有一个Ember应用程序，需要在渲染一些模板时进行一些库初始化。

Google + ， Facebook 和 Twitter API。我们在application路由内部以及包含这些特定小部件的每个模板内部进行初始化，以用于用户直接登陆该页面时的用例。问题是，当来自另一条路线时，Facebook和Twitter根本不会初始化。但是，Google +会这样做。此外，如果我们刷新所有3个小部件所在的页面，它们都会正确呈现。下面的示例是一个名为blog的路由，它还从服务器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("https://apis.google.com/js/client:platform.js");

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

实现侧抽屉（http://materializecss.com/）。我们需要在全球范围内对其进行初始化，因为它将在用户通过智能手机或平板电脑访问网站时使用。这里的问题是，在从我们的服务器API返回模型的路由上，即使我们在呈现模板之后在application路由内进行初始化，旁边抽屉也不起作用。为什么它不适用于有模型的路线？
```
                 renderTemplate: function ()
          {
            this._super();
            Ember.$(document).ready(function ()
                                    {
                                      Ember.$('.button-collapse').sideNav();
                                      Ember.$('select').material_select();
                                    });}
```

Answer 1

显然，当路由以所有渲染结束时，无法使用回调来初始化/解析此时的UI元素。哪种有点糟糕。然后，Web和JS框架的大部分工作方式都很糟糕。所以没有什么不同寻常的。

无论如何，解决方案是使用基于Web组件构建的Ember Components。只需将UI小部件HTML代码包装在组件中;在我们的例子中，我们在组件模板（/templates/components/example-widget.hbs）内移动了Facebook Share按钮，Facebook Page Widget，Twitter共享按钮和Materialise侧导航按钮HTML。然后在/components/example-widget.js创建关联的组件。这还应该包含didInsertElement回调。只需将你的代码放在回调中，就可以了。

Ember应用程序库初始化不起作用

1 个答案: