ember-multiselect-checkboxes - GitLite

KO | EN

gitlite — search

#javascript #python #llm #machine-learning #rust #linux #docker #macos #java #cli #awesome-list #pytorch #mcp #open-source

ember-multiselect-checkboxes

(★ 74)

Ember component providing multiselect functionality using checkboxes.

파일 탐색기

최종 버전 다운로드 (.zip)

- - multiselect-checkboxes.js
- - multiselect-checkboxes.js
- ember-try.js
- environment.js
- - .gitkeep
- - multiselect-checkboxes-test.js
- - .gitkeep
- .eslintrc.js
- index.html
- test-helper.js
.bowerrc
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.prettierignore
.prettierrc.js
.template-lintrc.js
.travis.yml
.watchmanconfig
CHANGELOG.md
CONTRIBUTING.md
ember-cli-build.js
index.js
LICENSE.md
package-lock.json
package-lock.json.ember-try
package.json
README.md
testem.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/RSSchermer/ember-multiselect-checkboxes

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd ember-multiselect-checkboxes

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Ember-multiselect-checkboxes [![](https://travis-ci.org/RSSchermer/ember-multiselect-checkboxes.svg?branch=master)](https://travis-ci.org/RSSchermer/ember-multiselect-checkboxes)

Simple Ember component for allowing multiple selection from a certain collection (a `hasMany` property for example)
using checkboxes.

## Demo
Demo available [here](https://rsschermer.github.io/ember-multiselect-checkboxes/).

## Installation

`ember install ember-multiselect-checkboxes`

## Usage

Example:

``` handlebars
<Multiselect-checkboxes @options={{this.users}} @labelProperty='name' @selection={{this.selectedUsers}}/>
```

This component can be used with an array of primitives as the options, an array of plain javascript objects as the
options, or an array of Ember objects as the options. The following attributes should always be set:

* `options`: a collection of Ember objects that can be selected.
* `selection`: the subset of the options that is currently selected. The selection will automatically be updated when
  the user checks or unchecks options through Ember's two-way bindings.

When using this component with an array of javascript objects or an array of Ember objects you should also set the
`labelProperty` attribute:

* `labelProperty`: the property on the plain javascript object or the Ember object that will be used as a label for the
  checkbox.  By default this property will render as plain text.  If translation is desired, set `translate` to true.

```handlebars
<Multiselect-checkboxes
    @options={{this.users}}
    @labelProperty='name'
    @selection={{this.selectedUsers}}
    @translate={{true}}/>
```

When using this component with an array of javascript objects or an array of Ember objects you may optionally specify
the `valueProperty` attribute:

* `valueProperty`: the property on the plain javascript object or the Ember object that will be used to represent this
  object in the selection. Example: when using an array of car objects as the options, if you set the `valueProperty`
  as their "color" property, the selection will be an array of color strings (not an array of cars).

[This controller for the demo application](https://github.com/RSSchermer/ember-multiselect-checkboxes/blob/gh-pages/demo-app/app/controllers/application.js)
provides an example of what your controller code could look like for each type of options collection.

An action can be bound to the `onchange` attribute:

```handlebars
<Multiselect-checkboxes
    @options={{this.users}}
    @labelProperty='name'
    @selection={{this.selectedUsers}}
    @onchange={{action 'updateSelection'}}/>
```

When a checkbox is checked or unchecked, this action will be triggered. The action handler will receive the following
parameters:

* `newSelection`: the subset of the options that is currently selected.
* `value`: the corresponding value of the checkbox that was checked or unchecked.
* `operation`: a string describing the operation performed on the selection. There are two possible values: 'added' when
  the value was added to the selection and 'removed' when the value was removed from the selection.

```js
actions: {
  updateSelection: function (newSelection, value, operation) {
    ...
  }
}
```

By default, the component will update the value bound to the `selection` attribute automatically. If you prefer to
update the value bound to the `selection` attribute yourself, this can be disabled by setting the `updateSelectionValue`
attribute to `false`:

```handlebars
<Multiselect-checkboxes
    @options={{this.users}}
    @labelProperty='name'
    @selection={{this.selectedUsers}}
    @onchange={{action 'updateSelection'}}
    @updateSelectionValue={{false}}/>
```

You should then update the value bound to the `selection` property in the action bound to `onchange`, e.g.:

```js
actions: {
  updateSelection: function (newSelection, value, operation) {
    this.set('selection', newSelection);

...
  }
}
```

Note that for long option lists, allowing the component to automatically update the value bound to the `selection`
attribute may result in significantly better performance.

It's also possible to pass a custom template block should you want to customize the option list in some way (requires
Ember 1.13 or newer). This template block will receive 3 block parameters: the option itself, a boolean value indicating
whether or not the option is selected, and the option's index:

```handlebars
<Multiselect-checkboxes @options={{this.users}} @selection={{this.selectedUsers}} as |user isSelected index|>
  
</Multiselect-checkboxes>
```

The initial example without a custom template block is essentially equivalent to the following example with a custom
template block:

```handlebars
<Multiselect-checkboxes @options={{this.users}} @selection={{this.selectedUsers}} as |user isSelected|>
  <li>
    <label>
      <Input @type="checkbox" @checked={{isSelected}}/>
      {{user.name}}
    </label>
  </li>
</Multiselect-checkboxes>
```

Note that the `labelProperty` attribute is superfluous when using a custom template block; instead, `{{user.name}}` is
used directly in the template block.

By default the `multiselect-checkboxes` tag will render as an `ul` element. This can be customized by specifying the
`tagName` attribute:

```handlebars
<Multiselect-checkboxes tagName='div' ...>
  ...
</Multiselect-checkboxes>
```