淘汰赛和 jQuery Mobile 的绑定问题

Question

更新：下面的第三个项目符号（“所以我尝试了以下”部分）是我最接近修复的部分。我认为我基本上需要1）禁用按钮，2）添加ui-disable，3）jqm刷新，都在数据绑定或模型中。

我正在尝试让淘汰赛demos 之一与 jqm 一起运行，以便在我的项目中构建类似的东西。除了提交按钮 does not disable 被禁用但在 items = 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 });

Answer 1

是的。如果你通过 JS 改变按钮属性（或者使用 KO 来改变这些属性），那么你必须调用 refresh 方法来更新视觉样式。

$('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/