淘汰賽和jQuery Mobile的綁定問題

UPDATE：下面的第三個項目符號（「所以我試了下面的」部分）是最接近我已經到了一個修復程序。我認爲我基本上需要1）禁用按鈕，2）添加ui-disable，3）jqm刷新，所有在數據綁定或模型。淘汰賽和jQuery Mobile的綁定問題

我正在嘗試使用jqm運行淘汰賽demos中的一個，以便在我的項目中構建類似項目。它主要工作，除了提交按鈕 ~~不禁用~~ 禁用，但不顯示灰色，如果項目= 0.

如果您刪除jqm，該示例工作正常，並且該按鈕變成灰色。我認識到，JQM可以擊倒由於DOM操作，所以我嘗試了以下衝突：

觸發風格刷新模型方法：$('button').button();或$('.ui-page-active').page('destroy').page();
開始pageinit後綁定。這打破了整個事情。
作爲一個測試，我嘗試了一個數據綁定來設置ui-disable而不是禁用按鈕。它適用於類，但jqm需要刷新。我可以將代碼放入數據綁定中進行刷新嗎？

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

這裏是小提琴我一直用它來解決此：http://jsfiddle.net/wtjones/wkEgn/

我缺少什麼？

<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 });

來源

2013-03-16 wtjones

我在jsFiddle中看不到您的問題。使用最新的Chrome Sumbit按鈕是不可點擊的，如果我刪除所有禮物... – nemesv 2013-03-16 15:24:46

您是對的，但我沒有意識到，因爲移動樣式在按鈕上沒有更改。我更新了這個問題以反映這一點。我是否需要以某種方式綁定一個處理程序來刷新它？ – wtjones 2013-03-16 15:42:35

我試着綁定ui-disable。我更新了這個問題來反映這一點。 – wtjones 2013-03-16 15:57:20

沒錯。如果您通過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/

來源

2013-03-16 16:04:26

我也想出了一個類似的小提琴，但你的似乎有點清潔：http://jsfiddle.net/wtjones/BZ2C5/ 這部分是什麼？： ko.bindingHandlers.enable.update.apply（el，arguments ）'; – wtjones 2013-03-16 16:20:33

在更新樣式之前，此行會調用默認的'enable'綁定回調（並啓用/禁用按鈕，即使您不使用jqm）。 – 2013-03-16 16:26:31

非常感謝！要小心，添加CLICK使用INIT而不是UPDATE：ko.bindingHandlers.click.init.apply（el，arguments）; – wizmagister 2013-05-19 15:10:14

淘汰賽和jQuery Mobile的綁定問題

回答

相關問題