바인딩 종류
입력 양식 바인딩
checked - 체크 상태를 모델로 지정
value - 입력 양식의 값을 모델로 지정
enable - 모델의 값에 따라 enable 속성을 지정
disable - 모델의 값에 따라 disable 속성을 지정
<input type="checkbox" data-bind="checked :chk" />
<h4>Enable Value</h4>
<input type="text" data-bind="enable :chk" />
ko.applyBindings({
chk : ko.observable(false)
});
options - options 태그를 생성하는 데 사용
selectedOptions - 선택된 options 태그를 의미
<h1 data-bind="text:region"></h1>
<select data-bind="options:regions, selectedOptions:region"></select>
ko.applyBindings({
region: ko.observable('선택하세요.'),
regions: ko.observableArray(['강남점', '교대점', '선릉점', '신촌점', '홍대점', '종로점' ])
});
속성 바인딩
attr - HTML 태그에속성을 바인딩
<div data-bind="foreach:collection">
<h2><a data-bind="attr: { href:href }, text:name"></a></h2>
<p data-bind="text:description"></p>
</div>
ko.applyBindings({
collection: ko.observableArray([{
name: '구글',
href: 'http://google.co.kr',
description: 'Lorem ipsum dolor sit amet'
},
{
name: '페이스북',
href: 'http://www.facebook.co.kr',
description: 'Lorem ipsum dolor sit amet'
}])
});
스타일 바인딩
style - style 속성을 바인딩
css - class 속성을 바인딩
<div data-bind="foreach:products">
<div data-bind="style: { color: price < 1000 ? 'blue' : 'red' }">
<h2 data-bind="text:name"></h2>
<p data-bind="text:price + '원'"></p>
<p data-bind="text:description"></p>
</div>
</div>
<style>
.expensive {
color: white;
background: red;
}
</style>
<div data-bind="foreach:products">
<div data-bind="css: { expensive: 1000 < price }">
<h2 data-bind="text:name"></h2>
<p data-bind="text:price + '원'"></p>
<p data-bind="text:description"></p>
</div>
</div>
조건 바인딩
if - 내부 태그를 참일 때 보이게 합니다.
ifnot - 내부 태그를 거짓일 때 보이게 합니다.
<div>
<span class="add-on">최소</span>
<input type="text" data-bind="value:limitMin" />
</div>
<div>
<span>최대</span>
<input type="text" data-bind="value:limitMax" />
</div>
<div data-bind="foreach:products">
<div data-bind="if: $parent.limitMin() < price && price < $parent.limitMax()">
<h2 data-bind="text:name"></h2>
<p data-bind="text:price + '원'"></p>
</div>
</div>
ko.applyBindings({
limitMin: ko.observable(Number.MIN_VALUE),
limitMax: ko.observable(Number.MAX_VALUE),
products: ko.observableArray([{name: '핫세븐', price: 800}, {name: '블루불', price: 2000}])
});
예)
<a href="/logout">Logout</a>
<ul data-bind="foreach:todos">
<li data-bind="style:{ opacity: completed() ? 0.3 : 1.0 }">
<input type="checkbox"
data-bind=" checked:completed, event:{ change:$parent.checkChange }" />
// you can use $parent to refer to data from outside the foreach
<span data-bind="text:title"></span>
</li>
</ul>
<form>
<input type="text" data-bind="value:title" />
<button data-bind="click:add">Add</button>
</form>
<p><a data-bind="click:remove">Remove items</a></p>
$(document).ready(function () {
$.getJSON('/todos', function (results) {
var todos = ko.observableArray([]);
ko.utils.arrayForEach(results, function (item) {
todos.push({
_id: ko.observable(item._id),
title: ko.observable(item.title),
completed: ko.observable(item.completed)
});
});
ko.applyBindings({
title: ko.observable(''),
todos: todos,
add: function (self) { },
remove: function (self) { },
checkChange: function (self) { }
});
});
});
Knockout 라이브러리는 이벤트 리스너로 다음 매개변수를 전달합니다.
this.submit = function(self, event){ };
매개변수 self는 이벤트를 발생한 뷰모델 자체를 의미하고
매개변수 event는 이벤트 객체를 의미합니다.
jQuery라이브러리를 사용하면 event 객체로 jQuery 이벤트 객체가 전달되며, 사용하지 않으면
일반 이벤트 객체가 전달됩니다.
