녹아웃 및 jQuery와의 바인딩 문제 Mobile

Question

업데이트 : 아래의 세 번째 글 머리 기호 ("다음에서 시도 했으므로"섹션 참조)가 가장 가까운 픽스입니다. 내가 생각하면 기본적으로 1) 버튼을 비활성화, 2) ui - 비활성화, 3) jqm 새로 고침, 데이터 바인딩 또는 모델 내에서 추가 할 필요가있다.

나는 녹아웃 demos 중 하나를 jqm과 함께 실행하여 프로젝트에서 비슷한 것을 만들려고합니다. 대부분 제출 버튼 이 비활성화되지 않는 경우를 제외하고는 이 비활성화되지만 항목이 0 인 경우 회색으로 표시되지 않습니다.

jqm을 제거하면 예제가 제대로 작동하고 버튼이 회색으로 바뀝니다. 나는 다음과 같은 노력 있도록 JQM으로 인해 DOM 조작에 녹아웃과 충돌 할 수 있다는 걸 :

• 모델 방법에 스타일 새로 고침을 트리거 : $('button').button(); 또는
• $('.ui-page-active').page('destroy').page();가 pageinit 후 바인딩 시작. 이것은 전체를 부러 뜨 렸습니다.

• 테스트로서, 버튼을 비활성화하는 대신 ui-disable을 설정하기 위해 데이터 바인딩을 시도했습니다. 클래스를 적용하지만 jqm은 어떻게 든 새로 고침이 필요합니다. 새로 고치기 위해 코드를 데이터 바인딩에 넣을 수 있습니까? http://jsfiddle.net/wtjones/wkEgn/

  내가 무엇을 놓치고 : 여기

  <button data-bind="css: {'ui-disable': gifts().length > 0}" type='submit'>Submit</button>

는 바이올린 나는이 문제를 해결하는 데 사용하고 있습니까?

<form action='/someServerSideHandler'> 
    <p>You have asked for <span data-bind='text: gifts().length'>&nbsp;</span> gift(s)</p> 
    <table data-bind='visible: gifts().length > 0'> 
     <thead> 
      <tr> 
       <th>Gift name</th> 
       <th>Price</th> 
       <th /> 
      </tr> 
     </thead> 
     <tbody data-bind='foreach: gifts'> 
      <tr> 
       <td><input class='required' data-bind='value: name, uniqueName: true' /></td> 
       <td><input class='required number' data-bind='value: price, uniqueName: true' /></td> 
       <td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td> 
      </tr> 
     </tbody> 
    </table> 

    <button data-bind='click: addGift'>Add Gift</button> 
    <button data-bind='enable: gifts().length > 0' type='submit'>Submit</button> 
</form> 

모델 코드 :

var GiftModel = function(gifts) { 
    var self = this; 
    self.gifts = ko.observableArray(gifts); 

    self.addGift = function() { 
     self.gifts.push({ 
      name: "", 
      price: "" 
     });  
    }; 

    self.removeGift = function(gift) { 
     self.gifts.remove(gift);     
    }; 

    self.save = function(form) { 
     alert("Could now transmit to server: " + ko.utils.stringifyJson(self.gifts)); 
     // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.gifts); 
    }; 
}; 

var viewModel = new GiftModel([ 
    { name: "Tall Hat", price: "39.95"}, 
    { name: "Long Cloak", price: "120.00"} 
]); 
ko.applyBindings(viewModel); 

// Activate jQuery Validation 
//$("form").validate({ submitHandler: viewModel.save }); 

Answer 1

네. JS를 통해 버튼 속성을 변경하거나 KO를 사용하여 이러한 소품을 변경하는 경우 새로 고침 메서드를 호출하여 시각적 스타일을 업데이트해야합니다.

$('button').button('refresh'); 

그래서 내가 대신 (적용되는 경우) 이동 버튼 스타일 업데이트 기본 enable의 사용자 정의 바인딩을 생성하는 것이 좋습니다 :

ko.bindingHandlers.mobileEnable = { 
    update: function(el) { 
     ko.bindingHandlers.enable.update.apply(el, arguments); 
     $.fn.button && $(el).button('refresh'); 
    } 
} 

및 ...을

<button data-bind='mobileEnable: gifts().length > 0' type='submit'>Submit</button> 

수정 바이올린 : http://jsfiddle.net/wkEgn/2/