JS | 녹아웃 Knockout.js 함수 정리
정라잇 |
요약
knockout.js는 View 를 담당하고 있습니다.
<div data-bind="" ></div>기본은 여기서 시작합니다
링크
- https://jsfiddle.net/calvinslusarski/7xuKX/2/
- https://knockoutjs.com/
- 튜토리얼
기본 예제
text 바인딩
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>// view 모델
function AppViewModel() {
this.firstName = "Bert";
this.lastName = "Bertington";
}
// knockout.js 활성화
ko.applyBindings(new AppViewModel());* 예제
가장 기초 방법입니다
observable, 관찰가능
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
}
ko.applyBindings(new AppViewModel());ko.observable 함수를 사용하면 값의 변동이 있을 때의 기점으로
데이터를 실시간 수정할 수 있게됩니다. (엔터 키를 눌렀을 때 작동됩니다)
computed, 계산된 값 정의
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
}
ko.applyBindings(new AppViewModel());
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>computed 함수를 사용하면 값을 조합하여 반환할 수 있게됩니다.
observable 과 같이 관찰이 가능하며(변경 이벤트할 때 발생) 다른 관찰 가능한 값을 참조하여 계산합니다.
- ko.computed ( 익명함수 ,this ) 에서의 this는 참조할 변수에 새 값이 평가될 때 뷰 모델에 바로 바인딩하기 위해 존재합니다. 공식문서
click, 동작 추가
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
<button data-bind="click: capitalizeLastName">Go caps</button>function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
this.capitalizeLastName = function() {
var currentVal = this.lastName(); // Read the current value
this.lastName(currentVal.toUpperCase()); // Write back a modified value
};
}
ko.applyBindings(new AppViewModel());click 을 활용하여 동작을 추가할 수 있습니다.
원래는 기존과 같이 동작해야 하지만, 이와 같이 추가 함수를 만들어 활용하는 방법도 존재합니다.
sammy.js 로 라우팅 작업
<script src="/scripts/lib/sammy.js" type="text/javascript"></script>
<!-- Folders -->
<ul class="folders" data-bind="foreach: folders">
<li data-bind="text: $data,
css: { selected: $data == $root.chosenFolderId() },
click: $root.goToFolder"></li>
</ul>
<!-- Mails grid -->
<table class="mails" data-bind="with: chosenFolderData">
<thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
<tbody data-bind="foreach: mails">
<tr data-bind="click: $root.goToMail">
<td data-bind="text: from"></td>
<td data-bind="text: to"></td>
<td data-bind="text: subject"></td>
<td data-bind="text: date"></td>
</tr>
</tbody>
</table>
<!-- Chosen mail -->
<div class="viewMail" data-bind="with: chosenMailData">
<div class="mailInfo">
<h1 data-bind="text: subject"></h1>
<p><label>From</label>: <span data-bind="text: from"></span></p>
<p><label>To</label>: <span data-bind="text: to"></span></p>
<p><label>Date</label>: <span data-bind="text: date"></span></p>
</div>
<p class="message" data-bind="html: messageContent" />
</div>function WebmailViewModel() {
// Data
var self = this;
self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
self.chosenFolderId = ko.observable();
self.chosenFolderData = ko.observable();
self.chosenMailData = ko.observable();
// Behaviours
self.goToFolder = function(folder) { location.hash = folder };
self.goToMail = function(mail) { location.hash = mail.folder + '/' + mail.id };
// Client-side routes
Sammy(function() {
this.get('#:folder', function() {
self.chosenFolderId(this.params.folder);
self.chosenMailData(null);
$.get("/mail", { folder: this.params.folder }, self.chosenFolderData);
});
this.get('#:folder/:mailId', function() {
self.chosenFolderId(this.params.folder);
self.chosenFolderData(null);
$.get("/mail", { mailId: this.params.mailId }, self.chosenMailData);
});
this.get('', function() { this.app.runRoute('get', '#Inbox') });
}).run();
};
ko.applyBindings(new WebmailViewModel());init, bind
- init : 처음 실행될 때
- bind : 값이 재할당될 때 마다
추가 기능
checked
<input data-bind="checked: displayMessage" />
<div data-bind="if: displayMessage">정상적으로 노출됩니다.</>ko.applyBindings({
displayMessage: ko.observable(false)
});체크가 이루어지면 ko.applyBindings 메서드 안에서 displayMessage | ko.observable이 True로 변경됩니다.
foreach
<ul data-bind="foreach: planets">
<li>
Planet: <b data-bind="text: name"> </b>
<div>
</li>
</ul><!– ko if –> 주석구문
<!-- ko if: someProperty === '0' -->
<div>내용</div>
<!-- /ko -->주석으로 값에 따라 노출을 시킬지 여부를 결정할 수 있습니다. 이중으로 설정할 수도 있습니다.
ifnot 조건문 부정
<div data-bind="ifnot: someProperty">...</div>
<div data-bind="if: !someProperty">...</div>ifnot 은 부정된 if와 같습니다
with
태그 등록
<loading-button params="buttonText: 'Get All Items'"></loading-button>ko.components.register("loading-button", {
template: [
'<button class="LoadingButton">',
'<span data-bind="text: buttonText">Get Items</span>,
'</button>'
].join(''),
viewModel: function(params) {
var self = this;
self.buttonText = ko.observable("params.buttonText")
}
})JS 함수 활용
const knockoutApp = document.querySelector("#knockout-app");
ko.applyBindings(new ItemsListViewModel(), knockoutApp);참조
- https://www.youtube.com/watch?v=oqthYvHXGo8
- https://m.blog.naver.com/wow0815/90161226353
- https://stackoverflow.com/questions/16914518/why-we-pass-this-in-ko-computed