如何使用jsViews切换类

Question

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

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

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

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

如何使用jsViews来实现这一点？

Answer 1

所以现在应该容易多了。

实际上，有一个tutorial sequence on data-linking，它包括关于数据链接类的this page，以及专门关于切换类的this one。

在您的示例中，您可以这样写：

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

Answer 2

您可以在模板中执行以下操作：

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

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

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

注册helper函数，如下所示

$.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;
    }});