如何解析rivets.js的值？

Question

我正在使用基於Django的Dashing框架。

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

您能否告訴我如何重寫腳本以獲取{detail}值並將其與{value}進行比較？

類似的東西：

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

預先感謝您。

Answer 1

您可以將對象傳遞給您的聯編程序而不是靜態值。

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

Answer 2

你只需要做到以下幾點：

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