1

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

我试图让其中一个淘汰演示与 jqm 一起运行，以便在我的项目中构建类似的东西。它主要工作，除了提交按钮不禁用变为禁用但如果项目 = 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 });
4

1 回答 1

4

是的。如果通过 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/

于 2013-03-16T16:04:26.990 回答