ember框架_如何将jQuery插件集成到Ember应用程序中

ember框架

本文由Craig Bilner进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！

jQuery的无处不在，仍然在Web开发领域中发挥着至关重要的作用。 定期使用它并不奇怪，尤其是在使用Ember之类的框架时。 该框架具有与jQuery插件类似的组件，因为它们都被设计为对您的项目负有单一责任。

在本文中，我们将开发一个简单的Ember组件。 本教程将展示如何将jQuery插件集成到Ember应用程序中。 该组件充当插件的包装器，该插件显示图片缩略图列表。 每当我们单击缩略图时，它将在图片预览器中显示它的较大版本。 通过提取单击的缩略图的src属性来工作。 然后，我们将预览器的src属性设置为缩略图的属性。 可以在GitHub上找到本文的完整代码 。

考虑到这一点，让我们开始进行这个项目。

设置项目

首先，让我们创建一个新的Ember项目。 首先，在CLI上执行以下命令：

npm install -g ember-cli

完成后，可以通过运行以下命令创建项目：

ember new emberjquery

这将在名为emberjquery的文件夹中创建一个新项目，并安装所需的依赖项。 现在，通过写cd emberjquery进入目录。

该项目包含我们将在本教程中编辑的不同文件。 您必须编辑的第一个文件是bower.json文件。 打开它，并将您当前的Ember版本更改为2.1.0。 我为此项目创建的jQuery插件可以作为Bower软件包使用。 您可以通过bower.json添加到bower.json文件中，将其包括在项目中：

"jquerypic": "https://github.com/LaminSanneh/sitepoint-jquerypic.git#faulty"

现在，要安装插件和新版本的Ember，请运行以下命令：

bower install

由于此插件不是Ember组件，因此我们需要手动添加所需的文件。 在ember-cli-build.js文件中，在return语句之前添加以下两行：

// Lines to add
  app.import("bower_components/jquerypic/js/jquerypic.js");
  app.import("bower_components/jquerypic/styles/app.css");

  return app.toTree();
};

这些行导入两个文件，并将它们包括在构建中。 一个是插件文件本身，另一个是插件CSS文件。 样式表是可选的，如果您打算自己设置插件样式，则可以随意将其排除。

创建一个新的插件组件

将插件包含在应用程序中之后，让我们通过执行以下命令开始创建新组件：

ember generate component jquery-pic

此命令创建一个类文件和一个模板文件。 在模板文件中，粘贴bower_components/jquerypic/index.html文件中的内容。 将内容放置在body标签中，不包括脚本。

此时，模板文件应如下所示：

{{yield}}
<div class="jquerypic" >
  <div class="fullversion-container">
    <img src="http://lorempixel.com/640/480/nature/1" alt="" class="full-version" >
  </div>
  <div class="thumbnails">
    <img src="http://lorempixel.com/640/480/nature/1" alt="" class="thumbnail">
    <img src="http://lorempixel.com/640/480/nature/2" alt="" class="thumbnail">
    <img src="http://lorempixel.com/640/480/nature/3" alt="" class="thumbnail">
    <img src="http://lorempixel.com/640/480/nature/4" alt="" class="thumbnail">
    <img src="http://lorempixel.com/640/480/nature/5" alt="" class="thumbnail">
  </div>
</div>

在类文件中，添加一个名为didInsertElement的函数：

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function () {

  }
});

我们现在处于关键时刻。 使用jQuery，插件初始化通常在document.ready函数中进行，如下所示：

$(document).ready(function(){
  //Initialize plugin here
});

相反，对于Ember组件，此初始化发生在名为didInsertElement的特殊函数内。 当组件准备就绪并已成功插入DOM时，将调用此函数。 通过将我们的代码包装在此函数中，我们可以保证两件事：

• 插件仅针对该组件初始化
• 该插件不会干扰其他组件

在初始化插件之前，让我们以当前状态使用组件。 为此，请使用以下命令创建索引模板：

ember generate template index

然后将以下代码添加到模板以使用该组件：

{{jquery-pic}}

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

完成后，使用以下命令加载Ember服务器

ember serve

使用此命令启动服务器。 打开您选择的浏览器并访问命令行界面指定的URL。 您应该在图片预览器下方看到缩略图列表。 请注意，当您单击缩略图时，没有任何React。 发生这种情况是因为我们没有连接插件事件处理程序。 我们开始做吧！

但是在描述如何执行正确的初始化之前，我将向您展示许多开发人员所犯的错误。 该解决方案乍看起来似乎可行，但我将通过显示它引入的错误来证明它不是最佳解决方案。

Ember组件初始化

为了显示问题，让我们开始将以下代码添加到didInsertElement函数中：

$(".jquerypic").jquerypic();

不使用Ember时，这通常是初始化插件的方式。 现在，检查您的浏览器窗口，然后单击缩略图。 您应该看到它们已按预期加载到大图片预览器中。 所有人似乎都可以正常工作，对吧？ 好吧，检查添加第二个组件实例时会发生什么。 为此，请向索引模板添加另一行，其中包含我之前显示的相同代码。 因此，您的模板现在应如下所示：

{{jquery-pic}}
{{jquery-pic}}

如果切换到浏览器窗口，应该会看到该组件的两个实例。 单击实例之一的缩略图时，您会注意到该错误。 这两个实例的预览器都会发生变化，而不仅仅是单击实例。

要解决此问题，我们需要稍微更改初始化程序。 下面报告了要使用的正确语句：

this.$(".jquerypic").jquerypic();

不同之处在于，我们现在使用this.$而不是$ 。 这两个组件实例现在应该可以正常运行。 单击一个实例的缩略图应不会影响其他组件。

当我们在组件中使用this.$ ，我们仅引用特定于该组件的jQuery处理程序。 因此，我们对它执行的任何DOM操作都只会影响该组件实例。 而且，任何事件处理程序都将仅在该组件上设置。 当我们使用全局jQuery属性$ ，我们指的是整个文档。 这就是为什么我们的初始初始化会影响其他组件的原因。

我不得不修改我的插件以演示此错误，这可能是以后文章的主题。 但是，处理组件的DOM的最佳实践是使用this.$ 。

销毁插件

好了，到目前为止，我们已经看到了如何设置事件处理程序。 现在是时候显示删除插件设置的事件的方法了。 当我们的组件要从DOM中删除时，应该这样做。 我们应该这样做是因为我们不希望任何多余的事件处理程序挂起。 幸运的是，Ember组件提供了另一个名为willDestroyElement钩子。 每当Ember即将销毁并从DOM中删除组件实例时，都会调用此钩子。 我的插件有一个stopEvents方法，可以在插件实例上调用它。 该方法应在Ember为我们提供的特殊挂钩中调用。 因此，在组件中添加以下功能：

willDestroyElement: function () {
  this.get('jquerypic').stop();
}

修改didInsertElement function ，使其如下所示：

didInsertElement: function () {
  var jquerypic = this.$(".jquerypic").jquerypic();
  this.set('jquerypic', jquerypic);
},

在didInsertElement函数中，我们只是将插件实例存储在组件的属性中。 我们执行此操作，以便可以在其他功能中访问它。 在willDestroyElement函数中，我们在插件实例上调用stopEvents方法。 尽管这是一个好习惯，但我们的应用程序无法触发此挂钩。 因此，我们将建立一个演示点击处理程序。 在此处理程序中，我们将在插件实例上调用stopEvents方法。 这使我可以证明所有事件处理程序均已按照我们的预期删除。

现在，让我们向组件添加一个click函数处理程序：

actions: {
  stopEvents: function () {
    this.get('jquerypic').stop();
  }
}

然后，将段落标签添加到组件模板，如下所示：

<p {{action "stopEvents"}} >
  Stop Events
</p>

单击此标记后，它将调用会破坏插件的stopEvents操作。 单击该段落后，插件将不再响应单击事件。 要再次启用事件，您必须像在didInsert挂钩中一样初始化插件。

在最后一部分中，我们完成了简单的Ember组件。 恭喜你！

结论

在本教程中，您已经看到jQuery插件在我们的职业生涯中仍然发挥着至关重要的作用。 借助其强大的API和JavaScript框架，了解如何将两个世界结合在一起并使它们和谐地工作非常有用。

在我们的示例中，该组件充当插件的包装，该插件显示图片缩略图列表。 每当我们单击缩略图时，它将在图片预览器中显示它的较大版本。 这只是一个示例，但是您可以集成所需的任何jQuery插件。

再次提醒您， 该代码在GitHub上可用 。

您是否在Ember应用程序中使用jQuery插件？ 如果您想讨论它们，请随时在下面的部分中进行评论。

翻译自: https://www.sitepoint.com/how-to-integrate-jquery-plugins-into-an-ember-application/

ember框架