使用KO禁用\启用Bootbox按钮

时间:2014-12-02 07:45:22

标签: javascript knockout.js bootbox

我正在使用一个启动箱确认对话框,其中包含绑定到ko observables的自定义消息模板。我希望计算obsrvables内容并仅在计算结果返回true时启用“ok”确认按钮。

目前我有这个js:

self.name = ko.obsevable():
var messageTemplate = $("#add-template").html();
ko.applyBindings(self, messageTemplate);

bootbox.confirm({
                title: "Add new",
                message: messageTemplate,
                callback: function (value) {
                        // do something
                    }
                }
            }

这个html:

<div id="add-template" style="display:none">
    <form role="form">
        <div class="row">
            <div class="col-xs-8">
                <div class="form-group">
                    <input data-bind='value: name, valueUpdate: "afterkeydown"' placeholder="Name">
                </div>
            </div>
        </div>
    </form>
</div>

它工作正常,但我希望只有在验证“名称”输入时才能启用bootbox“ok”按钮(使用服装验证功能)

有可能吗? 谢谢!

1 个答案:

答案 0 :(得分:1)

最后我得到了它。这是答案:)

http://jsfiddle.net/6vb7e224/5/

var viewModel = function () {
    var self = this;
    self.name = ko.observable();

    self.select = function () {
        var messageTemplate = $($("#add-template").html());
        ko.applyBindings(self, messageTemplate.get(0));
        messageTemplate.show();

        bootbox.dialog({
                title: "Add new",
                message:  messageTemplate,
                callback: function (value) {

                },
                buttons: {
                    render: {
                        disabled: "false",
                        label: "render",
                        className: "btn-success",
                        callback: function() {
                            return false;
                        }
                    },
                    overrride: {
                        label: "override",
                        className: "btn-primary",
                        callback: function() {}
                    },
                }
            });

    }
}


ko.applyBindings(new viewModel());