Как переключить класс, используя jsViews

Скажем, у меня есть элемент в шаблоне, как следующее:Как переключить класс, используя jsViews

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

Он имеет несколько классов, примененные к нему, но во время разработки я не буду точно знать, какие классы они находятся.

Если модель используется для связывания данных/связывания имеет свойство x, что верно, то я хотел бы добавить дополнительный класс к <div>, давайте назовем его c4, в противном случае я бы хотел, чтобы удалить c4 и сохранить существующие классы нетронутыми.

Как это можно сделать с помощью jsViews?

источник

2013-09-12 CHS

Вы могли бы сделать что-то вроде этого в шаблоне:

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

источник

2013-09-18 14:01:54 Ben

Я думаю, что те, и хорошие идеи. Вы знаете, есть ли способ в вспомогательной функции получить доступ к div и использовать jQuery для добавления/удаления класса C4 вместо замены всех классов? – CHS

Фактически вы не можете использовать первый подход - поместив {^ {if ...}} внутри значения атрибута класса. См. Http://www.jsviews.com/#samples/data-link/class для объяснения. Как получить доступ к div, да, это this.linkCtx.elem из кода внутри помощника. Но см. Мой ответ ниже для лучшего подхода. – BorisMoore

Есть несколько новых образцов, которые охватывают CSS и привязку класса - и которые показывают некоторые новые bui lt-in поддерживает переключение класса. Так оно и должно быть намного проще, теперь ...

На самом деле есть tutorial sequence on data-linking, который включает в себя this page по классу данных связующего и this one конкретно на переключая класс.

В вашем случае, можно было бы написать:

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

источник

2013-10-09 02:08:18 BorisMoore

Как переключить класс, используя jsViews

ответ

Смежные вопросы