HTMLBars模板中不允许使用“SCRIPT”标签 [英] `SCRIPT` tags are not allowed in HTMLBars templates

问题描述

我刚刚将我的应用升级到最新的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 leftwidth =100src =/ default_avatar.jpgalt =/> 
< h3>欢迎，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> 
  

此时不会破坏现有（和预期的）约定的任何东西。事实上，我一直在阅读这个问题，但没有一个明确的立场，加上一些我怀疑要避免使用的公约的快速黑客，所以我不会去。

我很清楚，文件对于埃克伯里的任何2.x仍然很年轻，而且还有一条长长的路。我可能可以帮助，一旦我弄清楚自己要做什么。

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

解决方案

您可以在index.html中导入js文件，并在其中调用 materialbox（）。这就是说，这样做的Ember方法是创建包装材料盒库的组件。

  {{materialbox-img src ='/ default_avatar.jpg'class ='radius left'}} 
 
从ember导入Ember; 
 export default Ember.Component.extend（{
 tagName：'img'，
 attributeBindings：['src']，
 didInsertElement（）{
 this。$ （）.materialbox（）; 
} 
}）; 
 //这可能不行，只是例子如何可以完成
  

Hi there and thank you for clicking my question.

I have just upgraded my application to the latest ember-cli release (2.3.0-beta.1) and now one (or more) of my templates messed with the build. What coming next seems like a trivial issue, yet I never fully got around to it very well, so I'm finally asking.

As the title suggests, I previously had <script> tags in my templates for minor things, such as a small jQuery conditional append() or anything doable by 2 or 3 lines of code. I never considered that enough motivation for creating a view, but in the meantime s**t got serious.

So, given the following snippet, what would be the recommended approach for keeping its functionality intact? Please do not mind the logic and motivation behind this specific code fragment, it's just an example:

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

Anything that won't break the existing (and anticipated?) conventions would do at this point. Thing is, I kept reading stuff on this subject but nothing had a clear stand on it, plus some quick hacks I suspect to be avoiding the conventions in use, therefore I wouldn't go for it.

I am well aware documentation is still young for anything 2.x in ember-cli and still has a long-ish road ahead. I might be able to help with it, once I figure out what to do myself.

Since this is a question that's 50/50 real issue and discussion on good practices, I'm considering posting on discuss.emberjs as well, if SO won't bring up any applicable solution / define the concepts behind in a clearer way.

解决方案

You can just import js file in index.html and call materialbox() there. That being said the Ember way of doing this would be to create component that would wrap materialbox library.

{{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”标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！