如何使用 jsViews 切换类答案

【问题标题】：How to toggle a class using jsViews如何使用 jsViews 切换类
【发布时间】：2013-09-12 15:16:17
【问题描述】：

假设我的模板中有一个元素，如下所示：

<div class="c1 c2 c3"></div>

它应用了几个类，但在设计时我不会确切知道它们是什么类。

如果用于数据绑定/链接的模型有一个名为x的属性是真的，那么我想在<div>中添加一个额外的类，我们称之为c4，否则我想删除 c4 并保持现有类不变。

如何使用 jsViews 做到这一点？

【问题讨论】：

标签： jsrender jsviews

【解决方案1】：

有一些新示例涵盖了 CSS 和类绑定 - 并显示了一些对切换类的新内置支持。所以现在应该容易多了……

实际上有一个tutorial sequence on data-linking，其中包括this page on data-linking 类，this one 专门针对toggling 类。

在你的情况下，你会写：

<div class="c1 c2 c3" data-link="class{merge:x toggle='c4'}">

【讨论】：

【解决方案2】：

你可以在模板中做这样的事情：

<div class="c1 c2 c3{^{if Properties.x}} c4{{/if}}"></div>

你也可以使用函数来返回类值：

<div data-link="class{:~getClass(#data)}"></div>

如下注册辅助函数

$.views.helpers({
    getClass: function(data){ //very simple, but you can see how this could be made more powerful by using data properties to determine class
    var myClass = "c1 c2 c3";
    if (data.Properties.x === true){
    myClass+=" c4";
    }
    return myClass;
    }});

【讨论】：

我认为这些都是好主意。你知道帮助函数中是否有办法访问 div 并使用 jQuery 添加/删除 C4 类而不是替换所有类？
事实上你不能使用第一种方法——将 {^{if...}} 放在类属性值中。有关说明，请参阅jsviews.com/#samples/data-link/class。至于访问 div，是的，它是来自 helper 中的代码的 this.linkCtx.elem。但是请参阅下面的答案以获得更好的方法。