I am defining a variable after the page load (storing numerical json data)

I can successfully put this variable in:

<span data-bind="text: extQty"></span>

And when the variable changes it updates the span with the appropriate variable (That works fine).

But it doesn't update my variable within my enable:

<p class="pull-right"><a class="btn btn-primary" data-bind="click: $root.add, enable: pagedList().length < extQty" href="#" title="edit"><i class="icon-plus"></i> Add Extension</a></p>

I need to have the enable effectively disable based on the value that is presented to "extQty". Right now I'm sending 5 to the extQty, and it seems the variable is only updating inside the "text" data-bind rather than the "enable" data-bind.

I am defining a variable after the page load (storing numerical json data)

I can successfully put this variable in:

<span data-bind="text: extQty"></span>

And when the variable changes it updates the span with the appropriate variable (That works fine).

But it doesn't update my variable within my enable:

<p class="pull-right"><a class="btn btn-primary" data-bind="click: $root.add, enable: pagedList().length < extQty" href="#" title="edit"><i class="icon-plus"></i> Add Extension</a></p>

I need to have the enable effectively disable based on the value that is presented to "extQty". Right now I'm sending 5 to the extQty, and it seems the variable is only updating inside the "text" data-bind rather than the "enable" data-bind.

• javascript
• knockout.js

• @generalhenry that is not the same question – Steve Greatrex Commented Mar 22, 2013 at 7:45

2 Answers 2

Knockout enable binding do not work with anchor tags.

So you have 2 solution to this.

Solution 1

<a href='#' title="edit" class="btn btn-primary" data-bind='click: function() { 
 if(pagedList().length < extQty())
 {
    //call the desired method from here
 }' >

Solution 2

This button displays only when your condition is success and it has click binding

<a class="btn btn-primary" data-bind="click: $root.add, visible: pagedList().length < extQty()" href="#" title="edit">

This button displays only when your negative condition is success and it do not have click binding

<a class="btn btn-primary" data-bind="visible: pagedList().length >= extQty()" href="#" title="edit">

Try using

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

Or else as pointed by @NaveenKumar.. You can use visible attribute...