0

disablejquery ui ボタンでノックアウト バインディングを使用しています。data-bind='disable: ture'jquery uiボタンプラグインが適用されているボタンで使用すると、そのボタンは無効になりますが、その外観は無効に設定されません。ここで、フィドルの例を作成しました：

http://jsbin.com/arotuh/2/edit

私は何が欠けていますか？

4

3 に答える 3

2

spullen が述べたように、カスタム バインディングを使用する方法は次のとおりです。

ko.bindingHandlers.jqButton = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = valueAccessor();
        for (var p in options) {
            options[p] = ko.utils.unwrapObservable(options[p]);
        }
        $(element).button(options);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).button("destroy");
        });
    },
    update: function (element, valueAccessor) {
        var options = valueAccessor();
        for (var p in options) {
            options[p] = ko.utils.unwrapObservable(options[p]);
        }
        $(element).button("option", options);
        $(element).button("refresh");
    }
};
ko.applyBindings({
    flag: ko.observable(true)
});

そしてHTMLで：

<button  data-bind="jqButton: {disabled: flag} ">Disable state using knockout disable binding</button>
于 2013-03-30T10:04:01.267 に答える
0

jquery uiボタンのオプションにオブザーバブルを使用するためのサポートを追加することにより、gbsの例（かなりうまく機能します）について詳しく説明したいと思います（たとえば、trueまたはfalseだけではなく、オブザーバブルにマップされることを無効にするなど）。

ko.bindingHandlers.jqButton = {
init: function (element, valueAccessor, allBindingsAccessor) {
    var options = valueAccessor();
    for (var p in options) {
        // CHANGE STARTS HERE
        if (ko.isObservable(options[p]))
            options[p].subscribe(function (newValue) {
                $(element).button("option", p, newValue);
                $(element).button("refresh");
            });
        // CHANGE ENDS HERE
        options[p] = ko.utils.unwrapObservable(options[p]);
    }
    $(element).button(options);
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).button("destroy");   
    });
},
update: function (element, valueAccessor) {
    var options = valueAccessor();
    for (var p in options) {
        options[p] = ko.utils.unwrapObservable(options[p]);
    }
    $(element).button("option", options);
    $(element).button("refresh");
}

};

于 2013-09-04T09:37:15.730 に答える
0

jqueryui ボタンを使用すると、属性のデフォルトの動作がオーバーライドされるように見えます (属性を制御するため、どのように制御するかは不明ですが、おそらくさらに調べる必要があります)。

ただし、順序を変更して動作させることができました。

ko.applyBindings();

$("button").eq(0).button();

$("button").eq(1).button({ disabled: true });

2 つのライブラリを適切に動作させるには、カスタム バインディングを作成することもできます。

于 2013-03-29T17:40:24.080 に答える