介绍
backbone-forms-chosen 是一个基于 Backbone.js 等框架的表单插件，它能够帮助开发者快速构建具备样式和功能的表单界面。backbone-forms-chosen 主要是针对选择器插件 chosen 做出的扩展，支持在表单中使用 chosen 插件，让表单的选择器具备更加出色的表现和交互。
本文将详细介绍 npm 包 backbone-forms-chosen 的使用方法，并且提供示例代码供参考。
安装
使用 backbone-forms-chosen，我们需要先安装和引入它。可以使用 npm 包管理器进行安装，也可以手动下载源码以及依赖库文件。
在终端中输入以下命令来安装 backbone-forms 和 chosen：
npm install backbone-forms --save npm install chosen-js --save npm install backbone-forms-chosen --save
使用
使用 backbone-forms-chosen 就像 Backbone 和其它表单插件一样，使用前需要引入相关代码库和样式文件。具体代码如下：
-- -------------------- ---- ------- ---- -- ----------- --- ------- ---------------------- ------------------------------------------------------------------------ ---- -- ----------------- --- ------- ---------------------- ---------------------------------------------------------------------------------- ---- -- --------- --- ----- ---------------- ---------------------------------------------------------- ------- ---------------------- ------------------------------------------------------------------------ ---- -- ------------------------ --- ------- ---------------------- --------------------------------------------------------------------------------------
接下来，我们可以使用 backbone-forms-chosen 提供的 API 开始创建表单界面。具体代码如下：
-- -------------------- ---- -------
-- ------
--- ----- - --- ----------------
------ --------
---
-- -----
--- ------ - -
------ -
----- --------- -- --- ------ --
-------- -- -- -------
---- --------
------ -------
-- -
---- ---------
------ --------
-- -
---- ---------
------ --------
--
-
--
-- ----
--- ---- - --- ---------------
------ ------
------- ------
------------
-- --------
-----------------------------------这是一个简单的表单例子，其中 fruit 是表单中的一个下拉选择框。可以看到，我们只需要在 schema 中将 fruit 字段的 type 设为 'Chosen' 类型，同时设置可选项列表即可使用 chosen 插件创建具备样式和交互的表单界面。
demo
下面是一个基于 backbone-forms-chosen 和 Bootstrap 的 demo，展示了如何使用 chosen 插件创建具备样式和交互的表单界面。展示页面将提供表单选项的更新和提交功能。具体代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------------- ------------
---- -- --------- --- ---
----- ---------------- ---------------------------------------------------------------------
---- -- --------- ---
----- ---------------- -----------------------------------------------------------
------- ---------------------- -------------------------------------------------------------------------
---- -- ----------- ---
------- ---------------------- -------------------------------------------------------------------------
---- -- ----------------- ---
------- ---------------------- -----------------------------------------------------------------------------------
---- -- ------------------------ ---
------- ---------------------- ---------------------------------------------------------------------------------------
------ ----------------
------------
------- -----
-
------------------
---------- ------
---------- ------
-
--------
-------
------
---- -------------------
----- --------------- ----------------------- ------------
---- -------------------
------ ----------- --------------- ----------------------------
---- ------------------
------- ---------- ------------ ------------------- -------------- ------------------------ - ----------
---------
------
------
---- -------------------
---- ---------------------- -----------
------- --------------- ---------- ----------- -------------- ----------------
------- --------------- ---------- ----------- -----------------------
------
------
-------
------
------- -----------------------
-- ------
--- ----- - --- ----------------
------ --
---
-- -----
--- ------ - -
------ -
----- --------- -- --- ------ --
-------- -- -- -----------
-
--
-- -----
--- ---- - --- ---------------
------ ------
------- ------
------------
-- ----------
-------------- ------------------------------------
-- --- ------ --
---------------------
-- ------
-------- --------------- -
-- ---- -------
--- ----------- - -
----- -------- ------ ---------
----- --------- ------ ----------
----- --------- ------ ---------
--
-- -------
------------------------------------------
-- -- ------ --
--------------------------------------
-
-- ------
-------- ------------ -
--- ---- - ----------------
----------------------------
-- ----- ----------
-
-- ----
---------------------------- -------- -- -
----------------
---
---------------------------- -------- -- -
-------------
---
-- -------------
----------------
---------
-------
-------总结
使用 backbone-forms-chosen 可以帮助我们快速构建具备良好表现和交互的表单，同时它的 API 也非常简单易用，开发期效率高。在项目中，我们可以按照本文提供的使用方法和示例代码来使用 backbone-forms-chosen，更好地实现表单功能需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1281e8991b448e6d22