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

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

1 个答案: