CODEWITHSUNDEEP
javascriptknockout.js
Patrick Ziebell Thøgersen
Patrick Ziebell Thøgersen

Reputation: 411

Visible not showing in Knockout.js

I have the following ko.computed: 

self.itemsInBasket = ko.computed(function(){
            return self.selectedDomains.length > 0;
        });

This is to be shown if this is clicked and incrementing value: 

this.addToCart = function(viewModel, event) {     
            console.log('click');
            self.selectedDomains(self.selectedDomains() +1);
        }

In my html I am using the following data-bind: 

<div class="domains__selected" data-bind="visible:  $root.domainSearch.selectedDomains.itemsInBasket">
<strong><span class="update--domain" data-bind="text: domainSearch.selectedDomains">&nbsp;</span>&nbsp; Domains selected</strong>
</div>

And it is incrementing fine, but it doesnt show the counter.

Can anyone spot whats wrong or point me in the correct direction I would be thankful :)

Upvotes: 0

Views: 242

Answers (2)

Amin Mohammadi
Amin Mohammadi

Reputation: 183

This solution worked for me:

self.selectedDomains = ko.observable("");
    self.itemsInBasket = ko.computed(function () {
        return self.selectedDomains() > 0;
    });

    self.addToCart = function () {
        console.log('click');
        self.selectedDomains(self.selectedDomains() + 1);
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="domains__selected" data-bind="visible:  selectedDomains() ">
    <strong><span class="update--domain" data-bind="text: selectedDomains">&nbsp;</span>&nbsp; Domains selected</strong>
</div>
<a class="btn btn-default btn-warning btn-xs"
   data-bind="click: addToCart.bind($data)">
    Update
</a>

Upvotes: 1

Amin Mohammadi
Amin Mohammadi

Reputation: 183

try this:

self.itemsInBasket = ko.computed(function(){
        return self.selectedDomains() > 0;
    });

Upvotes: 1

Related Questions