Question

我正在尝试在网站上使用两个第三方小部件但是无法弄清楚如何让Ember.js合作。我在Views上发现很多，并且发现它们现在已经被弃用了，而且组件似乎还有很长的路要走但是我不知道如何让它工作......

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

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

我如何使用组件或更好的替代方案来做到这一点！？

Answer 1

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

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

ember g partial inject_city

然后：

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

然后在你的主模板中： {{partial＆＃39; inject_city＆＃39;}}

进一步阅读：http://guides.emberjs.com/v1.10.0/templates/writing-helpers/

使用帮助程序（通知返回html必须使用safestring）

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

在1.13.0及更高版本中，语法不同：

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

（注意你应该生成一个帮助器，用Helper.helper包装并返回Ember.String.htmlSafe）。

进一步阅读：http://guides.emberjs.com/v1.10.0/templates/writing-helpers/

然而，最好的方法是在你的ember中使用构建块来构建/构建你自己的组件中的库，而不只是包含一个完整的脚本.. ember文档很好地解释了组件，并且ember-cli docs解释如何包含第三方库... 祝你好运！

Answer 2

我通过制作组件来实现这一目标。我有同样的问题，我想使用charts.js在页面加载时绘制一些饼图

我定义了图表并运行了js以在组件中创建它们。继承了组件＆＃39; js-charts＆＃39;：export default Ember.Component.extend({ didInsertElement: function() { insert script and or methods to run } });

由于didInsertElement，它总是会触发。

在页面模板中，您的渲染只需添加{{js-charts}}}组件

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

2 个答案: