I am setting a variable

var extQty;

Then a user inputs some data and submits, I return a json string with extQty. On success I am updating the variable:

    success: function (result) {
         window.extQty = result.extQty;
     }

I need to hide a button if the extQty surpasses the row count of a grid. How can I do this? I tried the below but it is not seeing the variable change as this has already loaded before extQty gets updated.

 <!-- ko if: pagedList().length < extQty -->

If I change extQty in the above to say 3 it works...

I am setting a variable

var extQty;

Then a user inputs some data and submits, I return a json string with extQty. On success I am updating the variable:

    success: function (result) {
         window.extQty = result.extQty;
     }

I need to hide a button if the extQty surpasses the row count of a grid. How can I do this? I tried the below but it is not seeing the variable change as this has already loaded before extQty gets updated.

 <!-- ko if: pagedList().length < extQty -->

If I change extQty in the above to say 3 it works...

• javascript
• jquery
• knockout.js

• Knockout uses ko.observable for variables that you want knockout to know about when they change. That said, why are you even using a global variable rather than making it an observable property of your view model? – Matt Burland Commented Mar 22, 2013 at 0:43
• Another part of the page grabs the json data, it is a separate function. Is there a better way of doing this? – Stephen Commented Mar 22, 2013 at 0:45
• If you have a reference to your view model (make it global, or at least put them in the same closure), what's the problem? Or you could even make the function to grab your json data part of the view model too. – Matt Burland Commented Mar 22, 2013 at 0:48

2 Answers 2

Make your variable a ko.observable and make it part of your view model.

function viewModel() {
    this.extQty = ko.observable(0);
    this.pagedList = ko.observableArray();
    //....
}

var myViewModel = new viewModel(); 
ko.applyBindings(myViewModel);

Then in your AJAX success:

success: function (result) {
     myViewModel.extQty(result.extQty);
}

Tried updating your fiddle:-

Your Fiddle Updated

<div data-bind="style: { display: (pagedList().length < extQty()) ? 'block' : 'none' }">
    <p class="pull-right">
        <a class="btn btn-primary" data-bind="click: $root.add" href="#" title="edit"><i class="icon-plus"></i>Add Extension</a>
    </p>
</div>

Correct me if i am wrong, when your use if binding, it allows the markup to appear or dissapear from your document based on condition as true or false. When your condition is false, the element would be mented out code when you see in html. Which cannot be changed unless you refresh the page. So, use visible binding, the markup stays in dom and you can play with the Visible binding to hide it or show it...

Have a look at Knockout If Binding documentation