jsrender - 如何使用 jsViews 切换类

Question

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

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

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

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

如何使用 jsViews 做到这一点？

Answer 1

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

事实上，有一个关于 data-linking 的教程序列，其中包括这个关于 data-linking 类的页面，以及这个专门关于切换类的页面。

在你的情况下，你会写：

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