如何在Ember.js模板中注入第三方javascript？

我试图在一个网站上使用两个第三方小部件，但是我不太明白如何让Ember.js合作。我在视图上找到了很多东西，发现它们现在已经被弃用了，组件似乎是一条路要走，但是我不知道如何让它工作

我有各种基于城市的模板，需要：

<script type="text/javascript" src="http://www.topix.net/iframe/city/atco-nj?js=1"></script>

还有一个是这样的：

<script>document.write('<script src="... + Math.random() + ..."></script>');</script> 

document.write（“”）；

---

我将如何使用组件或更好的替代品来实现这一点

为此，您不需要真正的组件，只需创建一个模板并将其注入到任何需要的地方即可。但是，我不是100%了解基于城市的模板，只是为了输出html，您可以使用模板/助手：

使用模板（称为部分模板）： 运行（如果使用ember cli，如果不只是在某个地方创建模板文件，请再次假设您在服务器上编译模板的方式）

然后：

//inject\u city.hbs

然后在主模板中： {{部分“注入城市”}

进一步阅读：

使用帮助程序（注意返回html时必须使用safestring）

Ember.handlebar.helper（'injectScript'，函数（值，选项）{
返回新的Ember.handlebar.SafeString（“document.write（“”）；）；
});

在1.13.0及以上版本中，语法不同：

import Ember from "ember";
export default Ember.Helper.helper(function(params) {
  return Ember.String.htmlSafe(`<b>${params[0]}</b>`);
});

从“余烬”导入余烬；
导出默认的Ember.Helper.Helper（函数（参数）{
返回Ember.String.htmlSafe（`${params[0]}`）；
});

（请注意，您应该生成一个helper，用helper.helper包装它并返回Ember.String.htmlSafe）

进一步阅读：

但是，最好的方法是在ember中包含库，通过使用构建块来构建/构建您自己的组件，而不仅仅是包含整个脚本。.ember文档非常好地解释了组件，ember cli文档解释了如何包含第三方库。。

---

祝你好运！

我通过制作一个组件实现了这一点。我遇到了同样的问题，我想在页面加载时使用charts.js绘制一些饼图

所以我定义了图表并运行js在组件中创建它们。 下面是组件“js图表”：

导出默认的Ember.Component.extend({
didInsertElement:function（）{插入要运行的脚本和或方法}
})；

由于didInsertElement，这将始终触发

---

在页面的模板中，您的呈现只需添加{{js charts}}组件

这太棒了！我感谢您的过程更正！唯一的问题似乎是脚本没有在页面o0上实际执行（使用helpers w/ember cli 1.13.8）搜寻仍在继续…在返回脚本标记之前，是否确保将脚本标记扭曲到安全字符串中？或者检查我添加的版本1.13.0。您应该使用它。两者都做相同的事情。我应该提到尝试

htmlSafe

。他们添加了脚本标记，但没有执行。Ember cli负责帮助程序语法。添加类似于

It的东西是有效的

document.write（'No show'））；出现在页面源代码中，但没有写入h3标记。看起来像是

文档。write

无论如何都不会工作：。脚本不会从帮助程序执行仍然很奇怪，但如果我想使用这些脚本，看起来我需要找到一种方法来获取和解析帮助程序中的脚本内容。

//inject_city.hbs
<script type="text/javascript" src="http://www.topix.net/iframe/city/atco-nj?js=1"></script>

Ember.Handlebars.helper('injectScript', function(value, options) {
  return new Ember.Handlebars.SafeString("<script>document.write('<script src="... + Math.random() + ..."></script>');</script> );
});

import Ember from "ember";
export default Ember.Helper.helper(function(params) {
  return Ember.String.htmlSafe(`<b>${params[0]}</b>`);
});