2017-02-21 12 views
0

Я использую Dashing рамки на основе Django.Как анализировать значение с помощью rivets.js?

HTML с использованием соглашений Rivets.js для привязки данных к файлу сценария.

<div rv-status-color="value"> 
    <h1>{ title }</h1> 
    <h2>{ value }</h2> 
    <p class="detail">{ detail }</p> 
    <p class="more-info" rv-show="moreInfo">{ moreInfo }</p> 
    <p class="updated-at" rv-show="updatedAt">{ updatedAt }</p> 
</div> 
<i rv-class="icon" rv-show="icon"></i> 

Следующий скрипт получает значение из HTML и устанавливает необходимый цвет в .css согласно условию.

rivets.binders['status-color'] = function(el, value) { 
    if (value == 0) { 
     $(el).css('background-color', 'green'); 
    } 
    else if (value < 0) { 
     $(el).css('background-color', 'orange'); 
    } 
    else { 
     $(el).css('background-color', 'red'); 
    } 
}; 

Не могли бы вы сказать мне, как переписать сценарий, чтобы получить значение {подробно} и сравнивая его с {значение}?

Нечто подобное:

rivets.binders['status-color'] = function(el, value) { 
    if (value == detail) { 
     $(el).css('background-color', 'green'); 
    } 
    else if (value < detail) { 
     $(el).css('background-color', 'orange'); 
    } 
    else { 
     $(el).css('background-color', 'red'); 
    } 
}; 

Спасибо заранее.

ответ

0

Объект можно передать объекту вместо статического значения.

<div rv-status-color="yourObject"> 

И затем использовать объект в сценарии

rivets.binders['status-color'] = function(el, obj) { 
    if (obj.value == obj.detail) { 
     $(el).css('background-color', 'green'); 
    } 
    else if (obj.value < obj.detail) { 
     $(el).css('background-color', 'orange'); 
    } 
    else { 
     $(el).css('background-color', 'red'); 
    } 
}; 
+0

Спасибо @Bigdragon большое за быстрый ответ! Я пробовал, но он не работает, означает, что виджет перестает работать вообще, когда я использовал ** obj.value ** или ** obj.detail **. – Ndrew

+0

Убедитесь, что вы передали правильный объект в 'rv-status-color =" yourObject "' – Bigdragon

+0

Дорогой @Bigdragon, возможно, я сделал что-то не так, но это не сработало. – Ndrew

0

Вам просто нужно сделать следующее:

rivets.binders['status-color'] = function(el, value, scope) { //scope being the current bound object 
    var detail=scope.detail; 
    if (value == detail) { 
     $(el).css('background-color', 'green'); 
    } 
    else if (value < detail) { 
     $(el).css('background-color', 'orange'); 
    } 
    else { 
     $(el).css('background-color', 'red'); 
    } 
}; 

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

  • Нет связанных вопросов^_^