HTMLBars 模板中不允许使用 `SCRIPT` 标签

Question

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

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

正如标题所暗示的，我以前在我的模板中有 <script> 标签用于小事，例如小的 jQuery 条件 append() 或任何可以通过 2 或 3 行代码。我从来没有考虑过创建视图的足够动机，但与此同时，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 的文档还很年轻，并且还有 long-ish 的路要走。一旦我弄清楚自己该怎么做，我也许能帮上忙。

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

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

HTMLBars 模板中不允许使用 `SCRIPT` 标签

`SCRIPT` tags are not allowed in HTMLBars templates

ember.js

ember-cli