Question

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

我正试图让一个淘汰赛demos与jqm一起运行，以便在我的项目中构建类似的东西。除了提示按钮~~没有禁用~~被禁用但它没有显示为灰色，如果items = 0。

如果删除jqm，示例工作正常，按钮变为灰色。我意识到由于dom操作，jqm可以与knockout冲突，所以我尝试了以下内容：

在模型方法中触发样式刷新：$('button').button();或$('.ui-page-active' ).page( 'destroy' ).page();
在pageinit之后开始绑定。这打破了整个事情。
作为测试，我尝试使用数据绑定来设置ui-disable而不是禁用按钮。它适用于类，但jqm需要以某种方式刷新。我可以将代码放入data-bind进行刷新吗？

<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/

与淘汰赛和jQuery Mobile绑定问题

1 个答案: