바인딩
데이터를 뷰와 연결하는 것을 의미합니다.
모델 바인딩
예)
window.addEventListener('load', function(){
ko.applyBindings({
title: ko.observable('Students')
});
});
뷰에서 data-bind 속성으로 title 모델과 연결합니다.
data-bind 속성은 "바인딩 형태:대상 이름" 형태로 사용합니다.
input 태그에는 value 형태로 모델 바인딩을 적용합니다.
<body>
<h1 data-bind="text:title"></h1>
<h1 data-bind="text:title"></h1>
<input data-bind="value:title"/>
</body>
[결과]
Students
Students
[Students]
정적 바인딩 또는 html 바인딩
<div data-bind="text:'<h1>Knockout.js</h1>'"></div>
컬렉션 바인딩
컬렉션 바인딩은 컬렉션과 뷰를 연결합니다.
예)
ko.applyBindings({
title: ko.observable(''),
students : ko.observableArray([
{ id: 1, // 변경될 가능성이 있는 객체를 observable 객체로 생성; id 속성은 변경되지 않음.
name: observable(''),
score: observable('') }
,
{ ... }])
})
foreach 바인딩
예)
<h1 data-bind="text:title"></h1>
<table>
<tbody data-bind=" f oreach:students ">
<tr>
<td data-bind="text:id"></td>
<td data-bind="text:name"></td>
<td><input type="number" data-bind="value:score"/></td>
</tr>
</tbody>
</table>
메소드 바인딩
window.addEventListener('load', function(){
function StudentsViewModel(){
this.title = 'Students';
this.students = ko.observableArray([{}, {}, ...]);
this.average = ko.computed(function(){
var students = this.students();
var output = 0;
ko.utils.arrayForEach(students, function(item){
output += Number(item.score()); // 자료형을 변경하여 계산
});
return output / stduents.length;
}, this);
}
});
ko.applyBindings(new StudentsViewModel());
<h1 data-bind="text:title">/h1>
<h2 Average: <span data-bind=" text:average "></span></h2>
이벤트 바인딩
이벤트 바인딩은 특정 태그에 이벤트를 연결하는 것입니다.
이벤트는 event 바인딩 형태를 사용합니다.
function StudentViewMode(){
this.title = 'Students';
this.students = ko.observableArray([ ... ]);
this.average = ko.computed(function(){ ... }, this);
this.submit = function(){
var input = document.querySelector('input');
var name = input.value;
this.students.push({
id: this.sutdents().length + 1,
name: ko.observable(name);
score: ko.observable(0.0);
});
input.value = ''; // 초기화
})
}
<form data-bind=" event:{submit:submit} ">
<input text="text" name="name" />
<input type="submit" value="ADD"/>
</form>
'Knockout' 카테고리의 다른 글
| Knockout 바인딩 종류 (0) | 2014.09.11 |
|---|---|
| knockout - 기본 객체 (0) | 2014.09.05 |
| MVVM 패턴 (0) | 2014.09.05 |
