Enyo에서의 Binding 사용 방법
Binding을 사용하여 두 지점 (From 과 To) 사이에 변화된 값을 자동으로 설정해 줄 수 있습니다.
아래 예제는 기본적인 Binding 예제입니다.
enyo.kind({
name: "MyValueSlider",
components: [{
kind: "moon.Slider",
name: "slider"
}, {
kind: "enyo.Control",
name: "label"
}],
bindings: [{
from: ".$.slider.value",
to: ".$.label.content"
}]
});
binding을 통해서 slider의 값을 자동으로 label에 넘겨주고 있습니다. 여기서 $ 노테이션 앞에 '.' 은 'this.'을 의미합니다. 만약 여기에 '^'을 사용한다면. 그것은 글로벌 스코프임을 말합니다.
아래 예제는 binding의 방향성 예제입니다.
enyo.kind({
name: "MyValueSlider",
published: {
sliderValue: 10 // Initial value of slider
},
components: [{
kind: "moon.Slider",
name:"slider"
}, {
kind: "enyo.Control",
name:"label"
}],
bindings: [{
from: ".sliderValue",
to: ".$.slider.value",
oneWay: false
}, // two-way binding {
from: ".$.slider.value",
to: ".$.label.content"
} // one-way binding ]
});
기본적으로 Binding은 from -> to 의 단방향(one-way)입니다. 하지만, oneWay : false 옵션을 추가하여 양방향(two-way)으로 만들 수 있습니다. 이렇게 양방향을 설정한 경우 초기에 sliderValue의 값이 slider의 초기값으로 설정이 됩니다. 이후에는 slider의 값이 변경되면 자동으로 sliderValue의 값도 변경합니다.
아래 예제는 binding의 transform 함수 예제입니다.
enyo.kind({
name: "MyValueSlider",
components: [{
kind: "moon.Slider",
name:"slider",
min: 0,
max: 1
}, {
kind: "enyo.Control",
name:"label"
}],
bindings: [{
from: ".$.slider.value",
to: ".$.label.content",
transform: function(val) {
return "The slider value is " + Math.round(val * 100) + "%";
}
}]
});
transform 함수를 사용하면 From ->To 로 이동하는 값을 변경할 수 있습니다. 위 예제의 경우 slider의 값이 변경될 때마다 값을 % 값으로 변경하여 label에 전달합니다.
아래 예제는 양방향 binding일 때 transform 함수 예제입니다.
enyo.kind({
name: "MyValueSlider",
components: [{
kind: "moon.Slider",
name:"slider",
min: 0,
max: 1
}, {
kind: "moon.Input",
name:"input"
}],
bindings: [{
from: ".$.slider.value",
to: ".$.input.value",
oneWay: false,
transform: function(val, dir) {
if(dir == "source"){
return (val * 100) + "%";
} else {
return parseInt(val) / 100;
}
}
}]
});
transform 함수의 두번째 파라메터를 이용해서 방향을 지시할 수 있습니다. 예제에서는 input 에 입력된 값을 slider에 전달하는 예제입니다.
(#참고 : 본 예제코드는 enyojs.com의 예제입니다.)