Rivets.js rv-show funktioniert nicht mit rv-each

Question

Ich bin neu bei Rivets.js. Vor diesem Code:

<div id="main"> 

    <div> 
    <button rv-on-click="toggle"> 
     Toggle 
    </button> 
    </div> 

    <div> 
    Dynamic headers sould be visible: {showDynamicHeaders} 
    </div> 

    <table> 
    <thead> 
     <tr> 
     <th>Fixed header</th> 
     <th>Fixed header</th> 
     <th rv-show="showDynamicHeaders" rv-each-item="items"> 
      {item.name} 
     </th> 
     </tr> 
    </thead> 
    </table> 

</div> 

var rvcontext = {}; 
var rview = rivets.bind($("#main"), rvcontext); 

rvcontext.showDynamicHeaders = true; 

rvcontext.items = [ 
    { 
    name : "Dynamic header 1" 
    },{ 
    name : "Dynamic header 2" 
    },{ 
    name : "Dynamic header 3" 
    } 
]; 

rvcontext.toggle = function(){ 
    rvcontext.showDynamicHeaders = !rvcontext.showDynamicHeaders; 
} 

würde ich den Tisch des dynamischen Header erwarten zu zeigen oder nicht, je nach dem Wert von showDynamicHeaders. Aber es scheint nicht zu funktionieren; Stattdessen sind die Header sichtbar oder nicht abhängig von initial Wert von showDynamicHeaders, aber ihre Sichtbarkeit ändert sich nicht, wenn der Wert aktualisiert wird.

Siehe this fiddle für ein Live-Beispiel.

Ich mache etwas falsch?

Answer 1

Versuchen Sie rv-show zum <table> Tag bewegen, wie folgt aus:

<table rv-show="showTable" > 
    <tbody> 
     <tr rv-each-item="items"> 
     <td>{item.name}</td> 
     </tr> 
    <tbody> 
    </table> 

working fiddle

Edit: Eine andere Möglichkeit wäre eine rv-Klasse-Tag in der jeder hinzuzufügen, wie folgt aus:

<div rv-each-i="data" rv-class-hide="i.a | neq 1"> 
    {i.a} - {i.b} ({i.c}) 
</div> 

javascript:

var data = [ 
    {a:1, b:"testing1", c:true}, 
    {a:1, b:"testing1a", c:true}, 
    {a:1, b:"testing1b", c:true}, 
    {a:2, b:"testing2", c:false}, 
    {a:2, b:"testing2a", c:true}, 
    {a:50, b:"testing50", c:false} 
]; 

rivets.formatters.neq = function(val, v2) { return val!=v2;}; 

$(document).ready(function() { 
    var $r = $('#rivets'); 
    rivets.bind($r, {data:data}); 
}); 

working fiddle der rv-Klasse Methode

Answer 2

Obwohl nicht auf Ihr Problem im Zusammenhang fand ich diese Frage während der Suche nach rv-Show nicht innerhalb eines Arrays Schleife arbeiten - schaltet die rv-Show Bindung Bedürfnisse entweder boolean oder integer Werte übergeben an ihn. "0" oder "1" werden immer als "true" ausgewertet. In meinem Fall habe ich die Daten einfach in eine Ganzzahl umgewandelt und sie hat wie beabsichtigt funktioniert.

Nur hinzugefügt, dass, wenn jemand anderes über diese Frage mit der gleichen Ursache wie ich stolpert, vor allem wenn es um AJAX-Daten geht.