Javascript 在Ember应用程序中使用jQuery插件方法的位置

余烬2.1.0

我用它作为一个例子，但我的问题是针对任何jQuery插件或任何JS插件

有时我想在整个网站上使用一些东西。假设有一个省略号或孤立的文本脚本，我计划在整个余烬应用程序中随处使用

然后有时候会有一些事情，比如这个FitText插件，我想在这里或那里用一个页面标题做一些事情

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

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

模板/index.hbs

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

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

我的第一次尝试只是想在

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方法没有

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

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

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

如果我想使用某个东西一次，应该在哪里/如何称呼它？

我试过很多路线挂钩，但都没有用

---

我缺少的核心概念是什么？

不确定你对*的意思，但这忽略了我的误解。”-组件是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>

{{#fit text标记名='h1'class='example-target'}某种类型。{{/fit text}

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

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

{{{#fit text tagName='h1'class='example-target'scale=1.5 maxFontSize='50px'}某种类型。{{/fit text}

这当然是我编写的组件的一个更聪明的版本——我从中吸取了教训，但它仍然不能回答我更大的问题。如果我在站点范围内为孤儿或其他人编写一些代码，我不能将这些都放在标记中。所谓“忽略我的误解”，我指的是关于非余烬代码的核心概念而且我还是不知道。

<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>