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

Question

您好,谢谢您点击我的问题.

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

正如标题所暗示的那样,我之前<script>在我的模板中有一些标记用于较小的事情,例如一个小的jQuery条件append()或任何可用的2或3行代码.我从来没有考虑过创造视图的足够动力,但在此期间却没有认真对待.

因此,鉴于以下代码段,保持其功能完整性的推荐方法是什么？请不要介意这个特定代码片段背后的逻辑和动机,这只是一个例子:

<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实际问题和讨论的问题,我正在考虑在discussion.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