Knockout.js는 JavaScript 기반의 MVVM 패턴 프레임워크입니다. Knockout.js를 활용하면 화면과 데이터 간의 동기화를 간편하게 처리할 수 있습니다.
Knockout.js에서 비동기 데이터를 처리하기 위해서는 일반적으로 AJAX 요청을 사용합니다. 다음은 Knockout.js에서 비동기 데이터 처리하는 방법의 예시입니다.
-
뷰모델(View Model) 생성 ```javascript function ViewModel() { var self = this; self.data = ko.observableArray([]);
// 비동기 데이터를 가져오는 함수 self.fetchData = function() { $.ajax({ url: “data.json”, // 데이터를 가져올 URL 설정 type: “GET”, dataType: “json”, success: function(response) { self.data(response); // 데이터를 뷰모델의 observableArray에 저장 }, error: function(error) { console.log(“Error:”, error); } }); }; }
var viewModel = new ViewModel(); ko.applyBindings(viewModel);
2. 데이터 바인딩하기
```html
<ul data-bind="foreach: data">
<li data-bind="text: $data"></li>
</ul>
<button data-bind="click: fetchData">데이터 가져오기</button>
위의 예시에서는 데이터를 가져오는 fetchData
함수를 정의하고, AJAX 요청을 통해 data.json
에서 데이터를 가져옵니다. 데이터를 성공적으로 가져오면, 뷰모델의 data
observableArray에 저장하여 자동으로 화면이 업데이트됩니다.
HTML에서는 foreach
바인딩을 사용하여 data
배열의 각 항목을 나열하고, text
바인딩을 사용하여 각 항목을 텍스트로 출력하였습니다. button
요소에 click
바인딩을 사용하여, 사용자가 버튼을 클릭할 때마다 fetchData
함수가 호출되도록 했습니다.
이렇게 Knockout.js를 사용하여 비동기 데이터를 처리할 수 있습니다. 추가적으로, 데이터의 변경 사항을 자동으로 감지하기 위해 Observable 속성을 사용하여 양방향 바인딩을 구현할 수도 있습니다.
더 자세한 내용은 Knockout.js 공식 문서를 참고하시기 바랍니다.