Question

我有一张桌子：

table class="table">
    <thead>
        <tr>

            <th>ID</th>
            <th>Description</th>


        </tr>
    </thead>

    <tbody data-bind="foreach: Curriculums">
        <tr>
            <td data-bind="text: ID"></td>

            <td>
                <div data-bind="event: { mouseover: toggle, mouseout: toggle }>
                    <span data-bind="text: curCode"></span>
                </div>
                <div data-bind="visible: selected">
                    <span data-bind="text: curDescription"></span>
                </div>
            </td>       

        </tr>
    </tbody>
</table>

这是我的淘汰赛

var Vm =
{

    Curriculums: ko.observableArray([]),
    ID: ko.Observable(),

    curCode: ko.observable(),
    curDescription: ko.observable(),

    selected: ko.observable(false),

    toggle: function() {
       this.selected(!this.selected());   
    }
}

我正在尝试加载课程表的所有记录。我成功检索并显示它，没有鼠标悬停/结束绑定。问题是当我实现mouseover和mouseout绑定时，knockout会抛出一个错误：

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: toggle is not defined;
Bindings value: event: { mouseover: toggle}

我该怎么做才能做到这一点？如果鼠标没有悬停，我将隐藏curDescription范围，当鼠标悬停到curCode范围时重新出现

Answer 1

当您在foreach绑定中使用时，

toggle应以$parent为前缀。否则，淘汰将在每个内部寻找功能 Curriculums数组中的项目。

<tbody data-bind="foreach: Curriculums">
    <tr>
        <td data-bind="text: ID"></td>

        <td>
            <div data-bind="event: { mouseover: $parent.toggle, mouseout: $parent.toggle }>
                <span data-bind="text: curCode"></span>
            </div>
            <div data-bind="visible: selected">
                <span data-bind="text: curDescription"></span>
            </div>
        </td>       

    </tr>
</tbody>

这仍然不会给你预期的结果。 ID，curCode selected和curDescription应该是Curriculums数组中项目的属性。您无需在Vm

中拥有该功能

var Vm = {
  Curriculums: ko.observableArray([{
    ID: 1,
    curCode: "CS101",
    curDescription: "Why C#?",
    selected: ko.observable(false) // this needs to be an observable
  }, {
    ID: 2,
    curCode: "CS102",
    curDescription: "Javascript 101",
    selected: ko.observable(false)
  }]),

  // "item" will have the current "Curriculum" element which triggered the event
  toggle: function(item) {
    item.selected(!item.selected());
  }
}

这是一个fiddle供您测试。浏览淘汰文档并玩弄一些小提琴，以便更好地理解ko绑定。

正如在answer中提到的另一个问题，您可以通过纯CSS来实现这一点。但同样重要的是，了解绑定在foreach内的作用非常重要。

Answer 2

就个人而言，我只是依靠CSS来做这么简单的事情，尤其是因为它更像是一个视觉事物而不是程序逻辑：

<table class="table show-on-hover">
    <thead>...</thead>
    <tbody data-bind="foreach: Curriculums">
    <tr>
        <td data-bind="text: ID"></td>
        <td>
            <span data-bind="text: curCode"></span>
            <span class="shown-on-hover" data-bind="text: curDescription"></span>
        </td>
    </tr>
</tbody

CSS：

table.show-on-hover tr .shown-on-hover {
    visibility: hidden;
}

table.show-on-hover tr:hover .shown-on-hover {
    visibility: visible;
}

然而，这是一种替代方式，而不是为什么您的解决方案不起作用的解释。这里发布的另一个答案很好地解释了这一点。

隐藏列的一部分，并通过鼠标悬停使用挖空出现

2 个答案: