본문 바로가기

javascript

Knockout.js 를 이용한 jQueryMobile update

반응형

Knockout.js 와 jQueryMobile


jQuery Mobile은 enhance 라는 과정을 시킨다.


따라서 knockout 의 Bind 가 정상적으로 일어나지 않을 수 있다.


Button 은 과정을 통해서 변형된다.


원본태그

<a href="#" data-role="button" data-bind = 'text : apply.lable'> a href="#" data-role="button" </a>



변형태그(enhanced)


<a href="#" data-role="button" class="bind-test-lement ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-bind="text : apply.lable" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">

<span class="ui-btn-inner ui-btn-corner-all">

<span class="ui-btn-text"> a href="#" data-role="button"</span>

</span>

</a>


여기서 변경이 되어야 할 text 값은 " a href="#" data-role="button" 이 부분이다.


제대로 된 변형을 시켜주기 위해서는 ko.applybinding 이후에 buttonMarkup을 호출해 주어야 한다.

var $target = $(a);

$target.data('buttonElements', null);

$target.buttonMarkup(); 



jQueryMobile에서 사용하기 위해서는 각 태그들의 변형을 분석하여 'refresh' 해주어야 한다.


case by case 를 찾아서 수정해야 했다.


^^ 코드 공개는 안되겠다...