knockout.js - ko 绑定即使没有点击按钮

Question

出于某种原因，即使在单击按钮之前，我也有以下代码，绑定发生了。基本上我想在单击按钮后显示表格，但一旦加载页面就会绑定。我在这里做错了什么？

JS代码

<script type="text/javascript">
 ShowHideDiv=ko.observable(false);
 function GetResults() {
    alert("test");  //<-- both alerts show as soon as the page loads
    self.ShowHideDiv(true);
    alert(ShowHideDiv()); 
 }

  $(document).ready(function () {
     ko.applyBindings(new GetResults());
  });
</script>

的HTML

<input type="button"  id="btnSearch" value="Search" style="margin-left:60px;margin-top:20px" tabindex="8" data-bind="click: GetResults" />


<div id="SearchResult" data-bind="visible: ShowHideDiv">
    <table width="100%" id="tblSearchResults">
    <thead>
        <tr>
            <th>Child Name</th>
            <th>Date</th>
        </tr>
    </thead>

    <tbody>
     <!-- to bind results here -->
    </tbody>

    </table>
</div>

Answer 1

您正在GetResults作为对象构造函数调用。所有代码行都将在构建时触发 ( new GetResults())。

除非您正在做一些我们在这里看不到的相当复杂的事情，否则使用new关键字创建视图模型会使事情变得过于复杂。尝试这样的事情：

var vm = {
    showResults: ko.observable(false),
    toggleShowResults: function() {
        vm.showResults(!vm.showResults());
    }
};

ko.applyBindings(vm);

势必：

<input type="button" data-bind="click: toggleShowResults" />

<div data-bind="visible: showResults">
  <!-- snip -->
</div>