Hiding une partie de la colonne et faisant apparaître par mouseover en utilisant KO

Question

J'ai une table:

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> 

c'est mon js

knock-out

var Vm = 
{ 

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

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

    selected: ko.observable(false), 

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

Je suis en train de charger tous les enregistrements de table du programme. Je l'ai récupéré avec succès et je l'ai affiché sans les fixations de la souris. Le problème est quand je mets en œuvre les liaisons et Mouseover mouseout, le knock-out renvoie une erreur:

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

comment puis-je faire ce travail? Je me cache la durée de curDescription si la souris est en vol stationnaire et ne pas le faire réapparaître lorsque la souris survole la durée de curCode

Answer 1

toggle doit être préfixé avec $parent que vous utilisez à l'intérieur d'une liaison foreach. Dans le cas contraire, KOI recherchera la fonction à l'intérieur de chaque élément dans la matrice 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> 

Cela ne vous donnera toujours pas le résultat attendu. ID, curCodeselected et curDescription doivent être des propriétés des éléments du tableau Curriculums. Vous n'avez pas besoin d'avoir cela dans votre 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()); 
    } 
} 

Voici un fiddle pour vous tester. Parcourez la documentation à élimination directe et jouez avec quelques violons pour bien comprendre les reliures ko.

Comme mentionné dans ce answer sur l'autre question, vous pouvez réaliser cela par CSS pur. Mais encore une fois, il est important que vous compreniez comment la liaison fonctionne à l'intérieur foreach.

Answer 2

Personnellement, je venais de recourir à CSS pour une chose si simple, notamment parce qu'il est plus comme une chose visuelle que la logique du programme:

<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; 
} 

Cependant, c'est une façon alternative, pas vraiment une explication de pourquoi votre solution ne fonctionne pas. L'autre réponse affichée ici fait du bon travail pour expliquer cela.