前言
在 Ember.js 中，我们通常会用到组件以及 modifier 这两个概念。而 @ember/render-modifiers 就是一个可以帮助我们更好地使用 modifier 的 npm 包。本篇文章将会详细讲解如何使用它以及它的相关知识。
安装与使用
使用 npm 进行安装：
npm install @ember/render-modifiers
在你要使用 modifier 的组件中引入：
-- -------------------- ---- -------
------ -------- ---- ------------------
------ - ------ - ---- ----------------
------ - ----------------- - ---- --------------------------
------ ------- ----- ----------- ------- -------- -
-------
----------------------- ------ ------ -
-------------------------- --------------------- ----- - ----- ---- ---
-
-我们看一下其中的代码：
首先，我们引入了 Modifier、action 和 didInsertModifier。
在我们自定义的 Modifier 中，我们通过 @action 来定义了名为 attachModifier 的方法。在这个方法中，我们通过 didInsertModifier 函数来将修改器应用于元素上。
这个函数会将名为 my-custom-modifier 的修改器应用于元素 element 上，并将当前的 modifier 实例以及参数 { arg1, arg2 } 传递进去。这样就可以自定义修改器并将其应用到元素上了。
进一步说明
modifier 是什么？
在 Ember.js 中，modifier 是用于对元素进行“修改”的一种概念。
例如，你可能希望在输入框上加上聚焦的状态，或者在某个按钮上添加一个点击事件。这些功能都可以通过 modifier 来实现。
自定义 modifier
我们以实现一个给按钮添加点击事件的自定义 modifier 为例进行说明。
-- -------------------- ---- -------
------ -------- ---- ------------------
------ - ------ - ---- ----------------
------ - ----------------- - ---- --------------------------
------ ------- ----- ------------- ------- -------- -
-------
------------------ -
--------------------------------------
-
-------
----------------------- --------------- -
--------------------------------- ------------------
-------------------------- ----------------- ----- - ------------ ---
-
-------
----------------------- -
------------------------------------ ------------------
-
-我们先通过 @action 定义了 handleClick 方法，在这个方法中，我们调用了传进来的 clickHandler 方法，并将 event.target 传入其中。这么做就可以在点击按钮时触发相应的事件了。
在 attachModifier 中，我们首先将 handleClick 绑定到 element 的 click 事件上，然后调用了 didInsertModifier 将修改器应用到元素上。
在 detachModifier 中，我们则是将 handleClick 从 element 的 click 事件中移除。
使用 modifier
使用 modifier 也非常简单，只需要在组件的模板文件中写入如下代码即可：
<button {{myCustomModifier arg1 arg2}}>按钮</button>这样就可以将自定义修改器应用到按钮上了。
总结
通过本篇文章，我们了解了 modifier 的概念，并学习了如何使用 npm 包 @ember/render-modifiers 来更好地应用 modifier。
同时，我们还讲解了如何自定义 modifier，并给出了一个实现点击事件的示例。
希望本文能为你提供一些帮助和指导，并让你更好地掌握 modifier 的相关知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc0a9b5cbfe1ea0611caf