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关键字创建viewmodel会使事情过于复杂。尝试这样的事情：

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>

ko绑定即使没有点击按钮也是如此

1 个答案: