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

How to inject 3rd party javascript in Ember.js template?

本文关键字：注入 第三方 JavaScript Ember js      更新时间：2023-09-26

我正在尝试在网站上使用两个第三方小部件，但无法完全弄清楚如何让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>

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

为此，您实际上不需要组件，只需创建一个模板并将其注入到需要的地方即可。但是我不是 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 'inject_city'}}

延伸阅读： http://guides.emberjs.com/v1.10.0/templates/writing-helpers/

使用帮助程序(请注意，要返回 HTML，您必须使用安全字符串(

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-cli文档解释了如何包含第三方库。祝你好运！

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

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

这将始终由于 didInsertElement 而触发。

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

相关文章：