CODEWITHSUNDEEP
knockout.js
Jonathan Kittell
Jonathan Kittell

Reputation: 7503

How to make text disable or invisible in knockout

I have a message on the page to instruct the user to select at least five items. I want the message to go away once the user has selected five items. 

<span class="message" data-bind="text: messageToChooseAtLeastFiveItems, disable: hasSelectedFiveItems"></span>

Inside the ViewModel I have set the value initially to false and when the user selects five items the value changes to true.

self.hasSelectedFiveItems = ko.observable(false);

gridUnredeemed.onSelectedRowsChanged.subscribe(function (e) {
    var hasFiveRecalc = gridUnredeemed.getSelectedRows().length >= 5;

    self.hasSelectedFiveItems(hasFiveRecalc);
});

Why is the text inside the span still appearing?

JSFiddle

http://jsfiddle.net/jkittell/x5xjncyp/

Upvotes: 1

Views: 307

Answers (1)

super cool
super cool

Reputation: 6045

you should be doing like this

View :

<select multiple="true" data-bind="options:array,selectedOptions:selected"></select>
<span class="message" data-bind="text: messageToChooseAtLeastFiveItems, visible: hasSelectedFiveItems"></span>
<button data-bind="click: chooseFive">Choose Five Now</button>
<button data-bind="click: chooseLessThanFive">Choose Less Than Five</button>

ViewModel:

function ViewModel() {
    var self=this;
    self.array=ko.observableArray([1,2,3,4,5,6,7]);
    self.selected=ko.observableArray();
    self.messageToChooseAtLeastFiveItems = "Choose Five Foo";
    self.hasSelectedFiveItems = ko.observable(true);
    self.chooseFive = function () {
        self.hasSelectedFiveItems(false);
    }
    self.chooseLessThanFive = function () {
        self.hasSelectedFiveItems(true);
    }
    self.selected.subscribe(function(data){
        console.log(data.length);
        if(data.length >=5) { self.hasSelectedFiveItems(false);}
        else
        { self.hasSelectedFiveItems(true);}
    });

}

ko.applyBindings(new ViewModel());

Working sample with DropDown and buttons here

Sample here using just buttons as per you fiddle

Using computed(as millimetric mendtioned) we can do like this check here best for this particulara scenario .

Upvotes: 3

Related Questions