Question

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

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

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

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

如何使用jsViews完成？

Answer 1

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

实际上有一个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>

注册帮助函数，如下所示

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

如何使用jsViews切换类

2 个答案: