Select

Selectbox 컴포넌트 구조와 사용법을 설명합니다.

기본 코드

<select id="select"></select>

var select = Nue.component('select', options);

Options

{
    el: '#select',        // Selectbox DOM Selector
    model: Nue.model(),   // Selectbox를 구성할 Data Model 객체
    valueField: 'value',  // Select option의 value로 지정할 data property
    textField: 'text',    // Select option의 text로 지정할 data property
    allType: null,        // All Select option
    blankType: null,      // Placeholder Select option
    selected: null,       // Select option selected 지정
    triggerEvent: null    // Component생성 시 event trigger
    autoRender: true      // Model에서 fetch완료시 자동으로 rendering하는 옵션
}

Rendering

Select Component를 생성 후 Data를 Option으로 구성하여 실제 화면에 rendering합니다.
model data에서 valueField로 지정한 property의 value와 textField로 지정한 property의 value를 <option> 태그로 구성합니다.

Rendering Template

<option value="${value}" ${isSelected} ${isDisabled} ${isAll} ${isBlank}>{text}</option>

기본 Rendering

로컬 data를 rendering하는 코드입니다. option에서 data model을 설정할수도 있고, Component 생성 후, 따로 model에 data를 set하는 방법이 있습니다.

// Component 생성 시 rendering
var select = Nue.component('select', {
    el: '#select',
    valueField: 'value',
    textField: 'text',
    model: Nue.model().set([
        { value: 'SUN', text: '일요일' },
        { value: 'MON', text: '월요일' },
        { value: 'TUE', text: '화요일' }
    ])
});

// Component 생성.
var select2 = Nue.component('select', {
    el: '#select2',
    name: 'check'
    valueField: 'value',
    textField: 'text'
});
// model에 data를 set하여 rendering
select2.model.set([
    { value: 'SUN', text: '일요일' },
    { value: 'MON', text: '월요일' },
    { value: 'TUE', text: '화요일' }
]);

Ajax Model Rendering

model이 ajax로 fetch하여 가져오는 response data를 rendering하는 코드 입니다.

var select = Nue.component('select', {
    el: '#select',
    valueField: 'value',
    textField: 'text',
    model: Nue.model({ url: '/api/codes' }) // ajax model binding
});

/**
 * model fetch후 완료시 자동 rendering
 * response data 예시 [
 * [{ value: '01', text: 'HTML' },
 *  { value: '02', text: 'CSS' },
 *  { value: '03', text: 'Javascript' }]
 */

select.model.fetch();

자동 Rendering 끄기

자동 Rendering끄기는 model이 ajax로 가져오는 data인 경우 rendering시점을 사용자가 조절하고 싶을 때 사용합니다. 이 옵션을 끄면 model에서 fetch완료 시 자동으로 rendering을 하지 않으며, 사용자가 임의로 render() 명령을 내리면 그때 rendering을 합니다.

// model fetch후 완료시 수동으로 render()
var select = Nue.component('select', {
    el: '#select',
    valueField: 'value',
    textField: 'text',
    model: Nue.model({ url: '/api/codes' }), // model binding
    autoRender: false    // 자동 rendering off
});

select.model.fetch().then(function(){
    setTimeOut(function(){
        select.render();
    },1000);
});

Option의 추가/삭제

option의 추가/삭제는 model 객체를 이용하여 data를 추가/삭제합니다. model객체를 이용하면 자동으로 rendering이 이루어집니다.

var select = Nue.component('select', {
    el: '#select',
    valueField: 'value',
    textField: 'text',
    model: Nue.model().set([
        { value: 'SUN', text: '일요일' },
        { value: 'MON', text: '월요일' },
        { value: 'TUE', text: '화요일' }
    ])
});

// select model의 2번째 object를 삭제한 데이터를 model에 다시 set한다.
var data = select.model.getJSON().splice(1,1);
select.model.set(data);

데이터 셋팅하기

Select에 selected option을 지정하는 방법입니다.

selected option

Component 생성 시 selected option에 value에 해당하는 값을 할당하여 selected를 지정합니다.

var select = Nue.component('select', {
    el: '#select',
    valueField: 'value',
    textField: 'text',
    model: Nue.model().set([
        { value: 'SUN', text: '일요일' },
        { value: 'MON', text: '월요일' },
        { value: 'TUE', text: '화요일' }
    ]),
    selected: 'TUE'    // 화요일 option이 선택된 상태로 rendering
});

setValue(value)

option의 value값으로 selected를 지정합니다.

var select = Nue.component('select', {
    el: '#select',
    valueField: 'value',
    textField: 'text',
    model: Nue.model().set([
        { value: 'SUN', text: '일요일' },
        { value: 'MON', text: '월요일' },
        { value: 'TUE', text: '화요일' }
    ])
});

// 화요일 option 선택
select.setValue('TUE');

setData(object)

selectbox의 name과 selected value를 매칭한 form data로 selected를 지정합니다.

// html : <select id="select" name="day"></select>
var select = Nue.component('select', {
    el: '#select',
    valueField: 'value',
    textField: 'text',
    model: Nue.model().set([
        { value: 'SUN', text: '일요일' },
        { value: 'MON', text: '월요일' },
        { value: 'TUE', text: '화요일' }
    ])
});

// 화요일 option 선택
select.setData({ day: 'TUE' });

데이터 가져오기

Select의 selected된 option data를 가져오는 방법입니다.

getValue()

selected된 option의 value를 가져옵니다.

var select = Nue.component('select', { ...options...});

// Get selected option value
select.getValue(); //-> 'MON'

getText()

selected된 option의 text를 가져옵니다.

var select = Nue.component('select', { ...options...});

// Get selected option text
select.getText(); //-> '월요일'

getData()

selectbox의 name과 selected value를 매칭한 form data를 가져옵니다.

// html : <select id="select" name="day"> ... </select>
var select = Nue.component('select', { ...options...});

// Get selected option text
select.getData(); //-> { day: 'TUE' }

All Type / Blank Type 지정

전체선택 또는 선택되지 않는(Disabled) placeholder역할의 option을 data와 별도로 생성할 수 있습니다.

allType

true로 지정할 때에는 Component 내부에 설정된 기본 데이터로 option이 생성됩니다.

// default 지정 (type: boolean)
var select = Nue.component('select', {
    ... options ...,
    allType: true      
});
//-> <option value="ALL">All</option>

// text로 지정 (type: text)
var select = Nue.component('select', {
    ... options ...,
    allType: '전체선택'  
});
//-> <option value="ALL">전체선택</option>

// object로 지정 (type: object)
var select = Nue.component('select', {
    ... options ...,
    allType: { value:'S_ALL', text: '전체' }  
});
//-> <option value="S_ALL">전체</option>

blankType

true로 지정할 때에는 Component 내부에 설정된 기본 데이터로 option이 생성됩니다.
blankType은 true로 생성 혹은 text로 커스터마이징이 가능하나, object data로 커스터마이징할 수 없습니다.

// default 지정 (type: boolean)
var select = Nue.component('select', {
    ... options ...,
    blankType: true      
});
//-> <option value="" disabled>Please select</option>

// text로 지정 (type: text)
var select = Nue.component('select', {
    ... options ...,
    blankType: '선택하세요'  
});
//-> <option value="" disabled>선택하세요</option>

이벤트 트리거

triggerEvent는 Select Component가 생성되고 첫 rendering이 완료된 시점에 임의로 DOM 이벤트를 발생시킬 수 있습니다.

// 생성 시 change event발생
var select = Nue.component('select', {
    ...options...,
    triggerEvent: 'change'
});
// 생성 시 mouseenter event발생
var select = Nue.component('select', {
    ...options...,
    triggerEvent: 'mouseenter'
});

Disabled

Select Component 자체 혹은 각 Option별 disabled의 설정방법 입니다.

// Component 생성
var select = Nue.component('select', { 
    ...options...,
    model: Nue.model().set([
        { value: 'SUN', text: '일요일' },
        { value: 'MON', text: '월요일' },
        { value: 'TUE', text: '화요일' }
    ])
});

select.disabled(true);  //-> Component 전체 disabled
select.disabled(false); //-> Component 전체 enabled
select.disabled(['SUN','MON']); //-> 일요일,월요일 옵션 disabled
select.disabled(['SUN','MON'], false); //-> 일요일,월요일 옵션 enabled

Destroy

Select Component를 초기화 합니다.

// Component 생성
var select = Nue.component('select', { ...options...});
// Component 초기화
select.destroy(); //-> DOM과 model data모두 초기화

DOM Selector 접근

생성된 Select Component는 해당 select DOM을 $el로 접근할 수 있습니다.
이것으로 jQuery의 기능을 이용할 수 있지만 DOM을 제어하는 단순 기능에만 사용하길 권장드립니다.

var select = Nue.component('select', { el: '#select' });

// className 추가
select.$el.addClass('className');

Model Data Option

Select Component는 Model data에서 다음의 특수 Property의 value값으로 기능을 수행합니다. value type은 boolean입니다. 이는 Component 내부에서만 사용되며 data 반환시에는 포함되지 않습니다.
직접 data를 설정하는 것은 오류를 일으킬 위험이 높아집니다.
단일 select인데 isSelected: true 인 옵션이 두개 이상인 경우 error를 발생합니다.

기본적으로 Component생성 시 autoRender:true 로 설정되어 있으므로 model에 변경된 data를 set하여도 자동으로 rendering이 이루어 집니다. 만약 autoRender: false로 설정하였다면, 수동으로 render()명령을 수행하십시오.

isSelected(boolean)

true인 경우 selected option이 됩니다.

// html : <select id="select" name="day"></select>
// 화요일이 선택된 상태로 생성됩니다.
var select = Nue.component('select', {
    el: '#select',
    model: Nue.model().set([
        { value: 'SUN', text: '일요일' },
        { value: 'MON', text: '월요일' },
        { value: 'TUE', text: '화요일' }
    ])
});

var data = select.model.getJSON();
data[1].isSelected = true;
select.model.set(data);  //-> 월요일 option selected

isAll(boolean)

true인 경우 allType option이 됩니다. 오직 1개의 data에서만 true값을 가집니다. allType option에 해당하는 data는 항상 첫번째에 위치하여야 합니다.

var select = Nue.component('select', {
    el: '#select',
    model: Nue.model().set([
        { value: 'SUN', text: '일요일' },
        { value: 'MON', text: '월요일' },
        { value: 'TUE', text: '화요일' }
    ])
});

var data = select.model.getJSON();
// allType option 추가
data.unshift({ value: 'allSelected', text: '전체선택', isAll: true });
select.model.set(data);

// Error발생. allType옵션 data는 항상 첫번째에 위치하여야 함.
data.push({ value: 'allSelected', text: '전체선택', isAll: true });
select.model.set(data);

isBlank(boolean)

true인 경우 blankType option이 됩니다. 오직 1개의 data에서만 true값을 가집니다. blankType option에 해당하는 data는 항상 첫번째에 위치하여야 합니다.

var select = Nue.component('select', {
    el: '#select',
    model: Nue.model().set([
        { value: 'SUN', text: '일요일' },
        { value: 'MON', text: '월요일' },
        { value: 'TUE', text: '화요일' }
    ])
});

var data = select.model.getJSON();
// blankType option 추가
data.unshift({ value: '', text: '선택하세요', isBlank: true });
select.model.set(data);

// Error발생. blankType옵션 data는 항상 첫번째에 위치하여야 함.
data.push({ value: '', text: '선택하세요', isBlank: true });
select.model.set(data);

isDisabled(boolean)

true인 경우 option이 disabled 됩니다. blankType이 아닌 option에 한합니다.

var select = Nue.component('select', {
    el: '#select',
    model: Nue.model().set([
        { value: 'SUN', text: '일요일' },
        { value: 'MON', text: '월요일' },
        { value: 'TUE', text: '화요일' }
    ])
});

var data = select.model.getJSON();
// disabled option 추가
data[0].isDisabled = true;
data[1].isDisabled = true;
select.model.set(data); //-> 첫번째,두번째 옵션 disabled