`SCRIPT` tags are not allowed in HTMLBars templates

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/35116422/script-tags-are-not-allowed-in-htmlbars-templates

标签

ember.js

ember-cli