javascript - visible binding in knockout.JS used with click binding -

i working on mini project in want following feature- when hdfc bank row clicked, related graph(showing company's growth on period of time) gets visible below.

i trying work out using 2 knockout.js concepts-- visible binding inside click binding. have tried follows-

this.showgraph = ko.observable(false); //initially graph <div> invisible self.drawgraph = function(company) {     //console.log(company.name+"=="+self.companyportfolio()[0].name);       self.showgraph = ko.computed(function() {         return company.name == self.companyportfolio()[0].name;       });      // console.log("showgraph="+self.showgraph());   } 

i got idea of using computed observables a stackoverflow post.

here html-

<table class="table table-hover">           <thead>             <tr>               <th>company</th>               <th>investment(%)</th>               <th>nos</th>               <th>abp</th>               <th>ltp</th>               <th><span class="glyphicon glyphicon-triangle-top"></span>daily(%)</th>               <th>total(%)</th>               <th>value</th>             </tr>           </thead>           <tbody data-bind="foreach: companyportfolio">             <tr>               <td data-bind="text: name,click: $parent.drawgraph"></td>               <td><span data-bind="text: investment"></span><span>(</span><span data-bind="text: investment_percentage"></span><span>%)</span></td>               <td data-bind="text: count"></td>               <td data-bind="text: avg_buy_price"></td>               <td data-bind="text: current_price"></td>               <td><span class="glyphicon glyphicon-triangle-top"></span><span data-bind="text: daily_percentage"></span><span>%</span></td>               <td><span data-bind="text: returns_percentage"></span><span>%</span></td>               <td data-bind="text: value"></td>             </tr>           </tbody>         </table>         <div class="row">           <div class="col-md-12 col-xs-12">             <div id="chart2" data-bind="visible: showgraph"></div>           </div>         </div> 

when click on hdfc bank row showgraph = true expected output.

see here-

problem- graph <div> stays invisible though showgraph observable gets correct value.

my code-github repo

the drawgraph function overwriting showgraph observable new computed every time it's called doesn't make sense. don't think need computed observable here anyways since you're updating based on click event.

try this:

self.showgraph = ko.observable(false); self.drawgraph = function(company) {     self.showgraph(company.name == self.companyportfolio()[0].name); }