CODEWITHSUNDEEP
htmldata-bindingknockout.jsknockout-2.0knockout-mvc
dsi
dsi

Reputation: 3359

How to flip the expand or collapse text on click of href - knockout

Binding data into html table using knockout. One of the column has large text 200 length.. and UI just got scroll long. So just want to show, first 20 length chars and click of, ... it should expand or collapse the text. so just created a template below, but it does not toggle the text. I can see Toggle is switch to true/false but, changes are not function on <span data-bind

 <span data-bind="text: (Toggle == 'false' && Comments.length > 20) ? Comments.substring(0, 20) : Comments"> </span>
        <a href="#" data-bind="click: toggleFullText(), visible: Comments.length > 20">...</a>

           toggleFullText= function () {
                console.log('full text');
                self.Toggle(!self.Toggle());
            };

Upvotes: 0

Views: 121

Answers (1)

Brother Woodrow
Brother Woodrow

Reputation: 6372

Toggle is an observable and a boolean, so you need to compare it to a boolean value ('false' is a string) and since observables are a function, you need to call them to get their value: Toggle() == false. Or, !Toggle().

Upvotes: 0

Related Questions