ember.js - HTMLBars 模板中不允许使用 `SCRIPT` 标签

Question

您好，感谢您点击我的问题。

我刚刚将我的应用程序升级到最新的 ember-cli 版本 ( 2.3.0-beta.1 )，现在我的一个(或多个)模板与构建混淆了。接下来的事情似乎是一个微不足道的问题，但我从来没有很好地解决它，所以我终于要问了。

如标题所示，我之前有<script>在我的模板中标记一些小东西，比如一个小的 jQuery 条件 append()或任何可通过 2 或 3 行代码实现的事情。我从来没有考虑过创建 View 的足够动机，但与此同时，s**t 变得认真起来。

那么，对于以下代码段，建议采用什么方法来保持其功能完好无损？请不要介意这个特定代码片段背后的逻辑和动机，这只是一个例子:

<div class="container">
  <div class="row">
    <div class="col s12 valign-wrapper">
      <img class="materialboxed radius left" width="100" src="/default_avatar.jpg" alt="" />
      <h3>Welcome, Sarah Connor!</h3>
    </div>
  </div>
  <div class="row">
    <div class="col s12">
      {{outlet}}
    </div>
  </div>
</div>


<script type="text/javascript">
  $(document).ready(function(){
     $('.materialboxed').materialbox();
  });
</script>

在这一点上，任何不会打破现有(和预期的？)惯例的事情都可以。问题是，我一直在阅读关于这个主题的资料，但没有明确的立场，再加上一些我怀疑是在避免使用中的约定的快速技巧，因此我不会去做。

我很清楚 ember-cli 中任何 2.x 的文档还很年轻，而且还有很长的路要走。一旦我弄清楚自己该怎么做，我也许可以提供帮助。

由于这是一个 50/50 的实际问题和关于良好实践的讨论，我也在考虑在 discuss.emberjs 上发帖，如果 SO 不会提出任何适用的解决方案/更清晰地定义背后的概念方式。

Answer 1

您可以在 index.html 中导入 js 文件并在那里调用 materialbox()。话虽这么说，Ember 的做法是创建包装 materialbox 库的组件。

{{materialbox-img src='/default_avatar.jpg' class='radius left'}}

import Ember from 'ember';
export default Ember.Component.extend({
  tagName: 'img',
  attributeBindings: ['src'],
  didInsertElement() {
    this.$().materialbox();
  }
});
// this may not work as is, just example how it could be done