rivets.jsで値を解析する方法は？

Question

私はDashingフレームワークを使ってDjangoをベースにしています。

Rivets.jsの規則を使用してスクリプトファイルにデータをバインドするHTML。

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