“SCRIPT”标签在 HTMLBars 模板中是不允许的

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 来说都还很年轻，而且还有很长的路要走。一旦我自己弄清楚该怎么做，我也许可以帮忙。

由于这是一个 50/

50 真正的问题和对良好实践的讨论，如果 SO 不会提出任何适用的解决方案/以更清晰的方式定义背后的概念，我也在考虑在 discuss.emberjs 上发布。

Answer 1

您可以在索引中导入js文件.html然后在那里调用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