knockoutjs는 mvvm 패턴을 사용하여 데이터가 변하면 ui에 있는 값도 자동적으로 변경되게 해주는 라이브러리이다.
https://knockoutjs.com/documentation/observables.html
Knockout : Observables
Observables Knockout is built around three core features: Observables and dependency tracking Declarative bindings Templating On this page, you’ll learn about the first of these three. But before that, let’s examine the MVVM pattern and the concept of
knockoutjs.com
처음 시작을 하게 되면 viewModel을 자바스크립트 객체 형태로 작성을 하게 되는데 live example을 보면 함수형태로 또 작성을 하고 있다. 여기에서 약간의 혼란이 발생을 하였고, 처음 객체형태인것으로 진행을 하다가 막히는 부분이 생겼다.
객체형태로 작성
<span>Name:<input data-bind="value: firstName"></span>
<span>last name:<input data-bind="value: lastName"></span>
<h1>Hello, <span data-bind="text: fullName"></span></h1>
<script>
var model = {
firstName:ko.observable('aaa'),
lastName:ko.observable('bbb'),
}
model.fullName = ko.pureComputed(function(){
return this.firstName() + this.lastName()
},model)
ko.applyBindings(model);
</script>
model의 데이터에 접근해야 하는 fullName을 밖으로 빼서 코드를 적어야 한다. 객체가 닫히지 않았으므로 객체 내부에서는 접근이 불가능하다는듯 하다. 그래서 fullName을 외부에 정의해주었다.
함수형태로 작성
<span>Name:<input data-bind="value: firstName"></span>
<span>last name:<input data-bind="value: lastName"></span>
<h1>Hello, <span data-bind="text: fullName"></span></h1>
<script>
var model = function(){
this.firstName = ko.observable('aaa');
this.lastName = ko.observable('bbb');
this.fullName = ko.pureComputed(function(){
return this.firstName() + this.lastName()
},this);
}
ko.applyBindings(model);
</script>
아래는 참고한 링크이며, 함수형태로 작성을 하는게 좋을듯 하다.
Difference between knockout View Models declared as object literals vs functions
In knockout js I see View Models declared as either: var viewModel = { firstname: ko.observable("Bob") }; ko.applyBindings(viewModel ); or: var viewModel = function() { this.firstname= ko.
stackoverflow.com
'Javascript > knockoutjs' 카테고리의 다른 글
[knockoutjs] custom element 사용 관련 (0) | 2023.01.19 |
---|---|
[knockoutjs] data-bind text에서 문자열을 추가하는 방법 (0) | 2023.01.11 |
[knockoutjs]viewModel에 함수 정의 위치에 따른 차이 (0) | 2023.01.11 |
댓글