emberjs 模板中的 Jquery 插件答案

【问题标题】：Jquery plugin in emberjs templateemberjs 模板中的 Jquery 插件
【发布时间】：2014-11-24 16:59:02
【问题描述】：

您好，我正在尝试使用 ember.js 和 feedek 制作一个简单的提要阅读器。但到目前为止，当我尝试为提要放置代码时，它不起作用。

feedek 的 Jquery 代码（在脚本标签中的索引模板内）：

$('#divRss').FeedEk({
    FeedUrl: 'http://vikinglogue.com/feed/',
    MaxCount: 100
});

模板的HTML代码：

<script data-template-name="index" type="text/x-handlebars">
    <article style="background-color:#fff;" id="divRss"></article>
</script>

当我在浏览器中运行此代码时，模板中没有显示任何内容，并且我没有收到任何错误。我认为这个问题是由于没有在模板中链接 feedek 引起的，但是当我尝试它时，什么也没发生。谢谢，如有任何帮助。

【问题讨论】：

标签： javascript jquery templates ember.js

【解决方案1】：

要在 Ember 应用程序中使用 jQuery 插件，通常最好将其包装在 component 中：

App.FeedEkComponent = Ember.Component.extend({
  tagName: 'article',

  didInsertElement: function() {
    this.$().FeedEk({
      FeedUrl: 'http://vikinglogue.com/feed/',
      MaxCount: 100
    });
  }
});

然后在您的 Handlebars 模板之一中，

<p>Your feed:</p>
{{feed-ek}}

【讨论】：

感谢您的帮助！我只有一个简单的问题：我需要 {{feed-ek}} 因为我已经在主模板中有一个 {{output}}。我怎样才能在那里显示提要？

【解决方案2】：

我会在 Sam 的出色回答中添加如下内容：

通过将 url 作为属性传递来使组件可重用
不要覆盖 didInsertElement 挂钩，而是指定函数应在 'didInsertElement' 事件上运行（请参阅 here）

http://emberjs.jsbin.com/boguwagisi/1/edit?html,js,output

【讨论】：