如何使用rivets.js解析值？

Question

I am using Dashing framework based on Django.

HTML using the Rivets.js conventions to bind data to the script file.

<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>

Following script gets value from HTML and set neccessary color to .css according condition.

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

Could you tell me how to rewrite script to get {detail} value and comparing its with {value}?

Something like that:

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

Thank you in advance.

Answer 1

You can pass in object to your binder instead of static value.

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

And then use the object in script

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

You just need to do the following:

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