npm 包 ember-pollett 使用教程

本文将介绍 Ember.js 的一个 npm 包 ember-pollett 的使用教程，该包用于处理多选、单选和复选框的表单元素数据。

安装

要使用 ember-pollett 包，首先需要在项目根目录下运行以下命令进行安装：

# yarn 安装
yarn add ember-pollett

# npm 安装
npm install ember-pollett --save-dev

引入

安装完成之后，在需要使用的地方引入 ember-pollett 包：

import { PollettMixin } from 'ember-pollett';
import Component from '@ember/component';

export default Component.extend(PollettMixin, {
  // ...
});

使用

复选框

{{#each choices as |choice|}}
  <label>
    {{input type="checkbox"
           checked=(array-includes selectedChoices choice.id)
           onchange=(action (mut selectedChoices) (pollett-arr-toggle choice.id selectedChoices))}}
    {{choice.text}}
  </label>
{{/each}}

在复选框的 input 标签上使用 onchange 事件，然后在表单组件中对应的组件中传入一个动作。

当用户点击复选框时，pollett-arr-toggle 动作将会按照当前状态对数组进行添加或删除操作。

单选框

-- -------------------- ---- -------
------- ------- -- ----------
  -------
    ------- ------------
           ------------ --------- ----------
           -------------- ---------------- ----------
           ---------------- ---- ----------------- ------------
    ---------------
  --------
---------

在单选框的 input 标签上使用 onchange 事件。当用户点击单选框时，将会触发对应的 onchange 方法，用于更新选中项的状态。

多选

{{#each choices as |choice|}}
  <option value="{{choice.id}}" selected={{array-includes selectedChoiceIds choice.id}}>{{choice.text}}</option>
{{/each}}

在多选框中，需要将数据绑定在选项中，并使用 selected 特性绑定是否选中该选项。使用 array-includes 判断选中项的 id 是否包含在已选中的 id 列表中。

以上是 Ember.js 的 npm 包 ember-pollett 的使用教程。可以根据具体需求自由选择使用的表单元素，并根据相关示例代码进行修改和扩展应用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecad5