Knockout 바인딩 종류

바인딩 종류

입력 양식 바인딩

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 이벤트 객체가 전달되며, 사용하지 않으면

일반 이벤트 객체가 전달됩니다.