Rivets.js rv-show 无法使用 rv-each

Question

我是 Rivets.js 的新手。鉴于此代码：

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

我希望 table 的动态 headers 显示与否取决于 showDynamicHeaders 的值。但这似乎不起作用；相反，headers 是否可见取决于 showDynamicHeaders 的初始值，但它们的可见性在值更新时不会改变。

有关实例，请参阅 this fiddle。

我做错了什么？

Answer 1

尝试将您的 rv-show 移动到 <table> 标签，如下所示：

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

working fiddle

编辑：另一种选择是在每个中添加一个 rv-class 标签，如下所示：

 <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 rv-class 方法

Answer 2

虽然与您的问题无关，但我在搜索 rv-show not working within array loop 时发现了这个问题 - 结果发现 rv-show 绑定需要传递给它的布尔值或整数值。 “0”或“1”总是评估为真，所以在我的例子中，我只是将数据转换为一个整数并且它按预期工作。

刚刚补充说，以防其他人因与我相同的原因而偶然发现这个问题，尤其是在处理 AJAX 数据时。

Rivets.js rv-show 无法使用 rv-each

Rivets.js rv-show not working with rv-each

javascript

jquery

rivets.js