Home/ Questions/Q 7005885
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T21:24:27+00:00

I’m using KnockoutJS and MVVM in a page and most if it works, but

  • 0

I’m using KnockoutJS and MVVM in a page and most if it works, but I’m having trouble getting all the bindings to reevaluate. For instance, I have a button that I want to enable when certain criteria are met:

<input type="submit" value="Purchase" data-bind="{enable: IsPurchaseValid}" />

IsPurchaseValid is a computed function of my viewmodel:

viewModel.IsPurchaseValid = ko.computed(function() {
console.log("IsPurchaseValid: function entered...");

if (this.Duration() == null ||  this.Total() <= 0 || this.SelectedPackageId() < 0) {
    console.log("IsPurchaseValid: Something is missing...");
    return false;
}

return this.IsLocalityCountValid();
}, viewModel);

The button is correctly disabled when the page loads, but is never reevaluated. IsLocalityCountValid is another computed function and the console.log statements indicate it is returning true. Chrome’s console shows no scripting errors.

How do I get the enable binding to reevaluate correctly? I also have a span with visible bound to !IsLocalityCountValid that never turns visible. I feel like I’m missing something basic but can’t figure out what it may be.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have a very basic repro for enable where it works. (see fiddle below)

    I suggest you check your CSS. I ran into this problem once because I had somehow deleted my button:disabled style. I had a style for the button that changed the background color and the font color, but somehow I
    removed the button:disabled style …. so the net result was that when it was disabled, it looked exactly the same as when it was enabled.

    Anyway, you can test the button enabling/disabling here: You can test this for yourself here: http://jsfiddle.net/johnpapa/wLKS6/

    The problem did not happen to me when there is no CSS to interfere. So the key may be to make sure your CSS classes are behaving first.

    • 0