隐藏栏的一部分，并使用敲除使其通过鼠标悬停而显示 [英] Hiding a part of column and making it appear through mouseover using knockout

问题描述

我有一张桌子:

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绑定时，基因剔除会引发错误:

I am trying to load all of the records of curriculum table. I successfully retrieved it and displayed it without the mouse over/out bindings. The problem is when I implement the mouseover and mouseout bindings, the knockout throws an error:

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

我该如何进行这项工作?如果鼠标没有悬停，我将隐藏curDescription跨度，并在鼠标悬停在curCode跨度上时使其重新出现

how can I make this work? I am hiding the curDescription span if the mouse is not hovering and make it reappear when the mouse hovers to the curCode span

推荐答案

toggle应该在

toggle should be prefixed with $parent as you are using it inside a foreach binding. Otherwise knockout will look for the function inside each item in Curriculums array.

<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

This still won't give you the expected result. ID, curCode selected and curDescription should be properties of items in Curriculums array. You don't need to have that in your 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());
  }
}

这里有一个小提琴供您测试.仔细阅读淘汰赛文档，并玩弄一些小提琴，以更好地理解ko绑定.

Here's a fiddle for you test. Go through the knockout documentation and play around with some fiddles to get a good understanding of ko bindings.

如该答案中关于另一个问题所述，您可以通过完全CSS来实现.但同样重要的是，您必须了解foreach中的绑定是如何工作的.

As mentioned in this answer on the other question, you can achieve this by pure CSS. But again, it's important you understand how binding works inside foreach.

这篇关于隐藏栏的一部分，并使用敲除使其通过鼠标悬停而显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！