jsrender - jsViews を使用してクラスを切り替える方法

Question

テンプレートに次のような要素があるとします。

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

いくつかのクラスが適用されていますが、設計時にはそれらがどのクラスなのか正確にはわかりません。

データ バインディング/リンクに使用されるモデルにxtrue というプロパティがある場合、追加のクラスを に追加し<div>たいc4と思いc4ます。

jsViewsを使用してこれを行うにはどうすればよいですか?

Answer 1

CSS とクラス バインディングをカバーするいくつかの新しいサンプルがあり、クラスを切り替えるための新しい組み込みサポートを示しています。だから今はずっと簡単なはずです...

実際、 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;
    }});