Ajax 데이터 바인딩 - Knockout.js

Ajax를 이용한 데이터 바인딩 시 어떤 방법을 사용하고 계신가요? 데이터를 받고 나서, HTML 태그를 찾아 데이터를 바인딩 시키는 방법을 사용하고 계신가요?

<table>
    <thead>
        <tr>
            <th>아이디</th>
            <th>이름</th>
        <tr>
    </thead>
    <tbody>
        <tr id="user-list">
 
        </tr>
    </tbody>
</table>
 
<script>
    $.ajax({
        url: "/api/v1/users",
        type: "GET",
        cache: false,
        success: ((data) => {
            $("#user-list").empty();
            $("#user-list").append("<td>" + data.id + "</td><td>" + data.name + "</td>");
        }),
        error: ((data) => {
            console.log("fail");
        })
    });
</script>

코드가 엄청 지저분 해 질뿐만 아니라, HTML 태그의 ID를 잘 못 넣는다던가 또는 HTML 태그가 테이블에서 div로 변경되면 바인딩 해주는 자바스크립트를 모두 변경해 주어야 하는 불편함이 상상을 초월합니다.

이러한 불편을 한방에 날려줄 수 있는 자바스크립트 라이브러리가 있으니 Knockout.js 입니다. MVVM과 옵저버 패턴이 적용되어 Ajax에서 받은 데이터가 변경되거나 Refresh되면 알아서 자동으로 데이터가 바인딩 됩니다. 또한 2-way 바인딩도 적용되므로 React나 AngularJs를 사용하기 전이라면 아주 괜찮은 자바스크립트 입니다.

개발자 문서와 Tutorial도 잘 만들어져 있기 때문에 쉽게 이해하고 따라할 수 있습니다. custom 바인딩 쪽을 들어가면 따로 공부를 해야 하지만 그렇지 않으면 러닝 커브가 매우 낮습니다. 위의 Ajax 데이터 바인딩은 아래와 같이 바꿀 수 있습니다.

<table>
    <thead>
        <tr>
            <th>아이디</th>
            <th>이름</th>
        <tr>
    </thead>
    <tbody>
        <tr>
             <td data-bind="text: id"></td>
             <td data-bind="text: name"></td>
        </tr>
    </tbody>
</table>
 
<script>    

function User(id, name) {
    var self = this;
    self.name = name;
    self.id = id;
}
 
function UsersViewModel() {
    var self = this;
 
    // Editable data
    self.users = ko.observableArray();
}
 
var viewModel = new UsersViewModel();
ko.applyBindings(viewModel);
 
$.ajax({
    url: "/api/v1/users",
    type: "GET",
    cache: false,
    success: ((data) => {
        viewModel.users($.map(data, item => UserCoupon(item.id, item.name));
    }),
    error: ((data) => {
        console.log("fail");
    })
});
</script>

바인딩될 클래스를 지정해 놓고 Ajax 데이터 결과를 array에 넣기만 하면 data-bind attribute가 모든 데이터 출력을 알아서 뿌려주게 됩니다. 

저는 Knockout.js를 사용하기 시작한 이 후 신세계를 경험하고 있습니다. 데이터 바인딩과 함께 Routing 라이브러리를 같이 사용하면 Single Page Application도 쉽게 만들 수 있습니다.