javascript - knockout.JS 中的可见绑定(bind)与单击绑定(bind)一起使用

Question

我正在开发一个迷你项目，我想要以下功能-当 HDFC Bank单击行，相关图表(显示公司在一段时间内的增长)在下面可见。

我正在尝试使用两个knockout.JS概念来解决这个问题-- visible binding 里面 click binding 。我尝试过如下-

this.showGraph = ko.observable(false); //initially the graph <div> is 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());
  }

我想到了使用computed observables来自a stackoverflow post .

这是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>

当我点击HDFC Bank时我得到的行 showGraph = true这是预期的输出。

看这里-

问题-图表<div>即使 showGraph observable 仍然不可见获得正确的值。

我的代码-GitHub repo

Answer 1

drawGraph 函数每次调用时都会用新的计算值覆盖 showGraph 可观察值，这没有多大意义。无论如何，我认为您实际上并不需要在这里计算可观察值，因为您是根据点击事件进行更新的。

尝试这样的事情:

self.showGraph = ko.observable(false);
self.drawGraph = function(company) {
    self.showGraph(company.name == self.companyPortfolio()[0].name);
}