在 Ember 应用程序中的何处使用 jQuery 插件方法

Question

Ember 2.1.0

我以FitText 为例，但我的问题是针对任何 jQuery 插件/或者真的 - 任何 JS 插件。

有时我想在网站范围内使用一些东西。假设我计划在整个 Ember 应用程序中的任何地方使用文本的省略号或孤立脚本。

然后有时会有诸如FitText插件之类的东西，我想在这里或那里用页面标题做一些事情。

然后想象一下 index.hbs 上有一些加载动画或其他内容，或者仅在进入第一条路线时 - 一次性。

ember-cli-build.js （以前的 Brocfile.js）

...
app.import('vendor/jquery.fittext.js');
...

模板/index.hbs

<div class='example-div'>
  <h1 class='example-target'>Some <span>type</span>.</h1>
</div>

标准实现

$('.example-target).fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });

在每种情况下我如何实现这一点？

我的第一次尝试只是在app.js 中达到顶级水平——我确信这并不理想——但会一直坚持到我升级为止。

例如，我目前有这个功能：

app.js

...
function randomLandingClass() {
  var themes = ['color-theme', 'highlight-theme', 'alternate-theme'];
  var randomTheme = themes[Math.floor(themes.length * Math.random())];
  $('body').addClass(randomTheme);
}

Ember.MODEL_FACTORY_INJECTIONS = true;

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver,

  ready() {

    randomLandingClass();

    $('.example-target').fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });

  }

});
...

randomLandingClass 按预期行事并使用 jQuery，但 fitText 方法不这样做。

我已经成功地用这个特定的插件构建了一个组件，但这只是忽略了我的误解。

如果我想在站点范围内使用方法，应该在哪里调用它？

如果我只想在几个不同的路由中使用一个方法，应该如何调用它？

如果我想使用一次，应该在哪里/如何调用它？

我尝试了许多路由挂钩都无济于事。

我缺少什么核心概念？

Answer 1

不确定您对 * 的意思是什么，但这只是忽略了我的误解。” - 组件是 Ember 实现这一点并在 Ember 结构中隐藏/包装 jQuery 插件功能的方式。

// components/fit-text.js
export default Ember.Component.extend({

    // defaults for the parameters
    scale: 1.2,
    minFontSize: '20px',
    maxFontSize: '40px',

    initialize: function() {
        this.$().fitText(
            this.get('scale'), {
                minFontSize: this.get('minFontSize'),
                maxFontSize: this.get('maxFontSize')
            }
        );
    }.on('didInitAttrs', 'didUpdateAttrs');
});

现在您可以在模板中使用它：

<div class='example-div'>
    {{#fit-text tagName='h1' class='example-target'}}Some <span>type</span>.{{/fit-text}}
</div>

如果你愿意，你可以覆盖默认参数，例如

<div class='example-div'>
    {{#fit-text tagName='h1' class='example-target' scale=1.5 maxFontSize='50px'}}Some <span>type</span>.{{/fit-text}}
</div>