什么是 ember-cli-mentionable
ember-cli-mentionable 是一个 Ember.js 插件，它提供了在表单中创建可提及用户的功能。它使用了 mentions-input 库并将其封装在 Ember.js 组件中。这个插件可以让你的用户在输入框中选择已经存在的用户，并且可以使用键盘来实现搜索和选择。
如何使用 ember-cli-mentionable
安装
首先需要在已经安装了 Ember CLI 的项目中安装 ember-cli-mentionable。可以使用以下命令进行安装：
ember install ember-cli-mentionable
使用
要使用 ember-cli-mentionable，需要在你的项目中导入它并将它添加到你的组件中。这里有一个简单的例子：
{{mentionable-input
selectedUsers=selectedUsers
users=users
placeholder="Enter a user..."
}}在这个例子中，我们使用 mentionable-input 组件来创建一个输入框，该输入框可以允许用户提及已经存在的用户。我们通过传入 selectedUsers 和 users 属性将应用的状态传递给这个组件。placeholder 属性可以设置输入框中的占位符。
然后需要在你的控制器中定义 selectedUsers 和 users 属性：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
-------------- ------------------------- -- ----- -----------
------ -
------------------------ -- ----- ----------
------------------------ -- ----- --------
------------------------ -- ----- ------------
--
---在这个控制器中，我们定义了 selectedUsers 和 users 属性，这些属性将传递给 mentionable-input 组件。我们可以使用 Ember.Object 来定义单个用户，并使用它们在我们的组件中。
现在你可以启动你的 Ember.js 应用并访问你的包含 mentionable-input 组件的页面。你将看到输入框并可以尝试提及已经存在的用户。
给你的项目增添更多功能
除了基本功能，ember-cli-mentionable 还提供了一些其它的特性和配置选项。在这里，我们将介绍其中的一些。
增加搜索逻辑
默认情况下，ember-cli-mentionable 会为你实现提及搜索的逻辑。默认的搜索行为是通过输入框中的文本进行匹配。如果你想要更多的控制，你可以传入一个名为 queryFunction 的属性并实现自己的搜索逻辑。
{{mentionable-input
selectedUsers=selectedUsers
users=users
queryFunction=(action "searchUsers")
placeholder="Enter a user..."
}}在这个例子中，我们定义了一个名为 searchUsers 的 action，它将接收输入框中的文本，并返回一个包含所有匹配结果的 Promise。你可以在你的控制器中定义这个 action：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
-------- -
------------------ -
------ ------------------------ - ------- ----- ---
--
--
---在这个控制器中，我们定义了一个名为 searchUsers 的 action，它将接收输入框中的文本，并返回一个包含所有匹配结果的 Promise。这个 Promise 将被转换成一个 Ember 数组，并传递到 mentionable-input 组件中以供使用。
自定义选项的渲染方式
默认情况下，ember-cli-mentionable 会按照一种内置的方式来渲染高亮选项。但是，你可以通过传入一个自定义的 renderOption 属性来实现自己的渲染方式。这个 renderOption 属性可以是一个函数或者返回一个包含组件名称和属性的对象。
{{mentionable-input
selectedUsers=selectedUsers
users=users
renderOption=(action "renderUser")
placeholder="Enter a user..."
}}在这个例子中，我们定义了一个名为 renderUser 的 action，它将接收一个用户对象并返回一个包含组件名称和属性的对象。我们可以在我们的控制器中定义这个 action：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
-------- -
---------------- -
------ -
-------------- -------------------
--------------- -
----- -----
--
--
--
--
---在这个控制器中，我们定义了一个名为 renderUser 的 action，它将接收一个用户对象并返回一个包含组件名称和属性的对象。这样 mentionable-input 组件就能够以你在 renderUser 中定义的方式来渲染每个选项了。
结束语
ember-cli-mentionable 插件为 Ember.js 应用程序中的输入框提供了一个非常好的可提及用户的功能。它不仅易于使用，而且可以通过自定义搜索逻辑和选项渲染来满足各种需求。希望这篇文章能够帮助你在你的 Ember.js 项目中实现可提及用户的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731581e8991b448e942a