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

Question

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

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

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

那么，鉴于以下 sn-p，保持其功能完整的推荐方法是什么？请不要介意此特定代码片段背后的逻辑和动机，这只是一个示例：

<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 的实际问题和关于良好做法的讨论，我正在考虑在讨论.emberjs 上发帖，如果 SO 不会提出任何适用的解决方案/更清晰地定义背后的概念方式。

Answer 1

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

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