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

不确定你的意思*但这只是忽略了我的误解。＆＃34; - 组件是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>

在Ember应用程序

1 个答案: