Rivets.js rv-show不使用rv-each

时间:2016-03-18 17:47:54

标签: javascript jquery rivets.js

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

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

我希望表的动态标头显示与否,具体取决于showDynamicHeaders的值。但它似乎不起作用;相反,标头是可见的或不可见,具体取决于public class Student { public int ID { get; set; } public string Name { get; set; } public int StandardRefId { get; set; } [ForeignKey("StandardRefId")] public Standard Standard { get; set; } } public class Standard { public int ID { get; set; } public string Name { get; set; } public ICollection<Student> Students { get; set; } } 初始值,但是当更新值时,它们的可见性不会改变。

有关实例,请参阅this fiddle

我做错了什么?

1 个答案:

答案 0 :(得分: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});
});
rv-class方法的

working fiddle