How to parse value with 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.

score 0 · Answer 1 · answered Feb 21 '17 at 11:47

0

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

answered Feb 21 '17 at 11:47

Bigdragon

352
1
4
16

Thank @Bigdragon very much for the fast answer! I've tried but it does not work,meant the widget stopped working at all when I had used **obj.value** or **obj.detail**. – Ndrew Feb 21 '17 at 12:31
Make sure you pass the correct object in `rv-status-color="yourObject"` – Bigdragon Feb 21 '17 at 12:33
Dear @Bigdragon maybe I did something wrong but it didn't work. – Ndrew Feb 22 '17 at 04:52
@Ndew can you try console.log the obj in the binder function? what's it return? or it not going in the binder function at all? – Bigdragon Feb 22 '17 at 06:52
Dear @Bigdragon Unforunately I cannot upload .log. Could you fix my mistakes here? [link](https://jsfiddle.net/andrew_mug/zxLenf92/) Or show me how it should work? – Ndrew Feb 22 '17 at 07:36
@Ndrew Your fiddle doesn't include variables (title, value, etc.) so it should not be working. What i mean in the answer is put your parent object (the one that give you `value`, `detail` etc.) in the `rv-status-color=""` attribute and it should enable you to use the data in binder function. – Bigdragon Feb 22 '17 at 07:58
Dear @Bigdragon I have passed the object. And it works but server stops working in proper way, here part of the log after passing object.[link](https://gist.github.com/abakal/cfe7c0a2ecd697fba94764d3ab4bd320) – Ndrew Feb 27 '17 at 09:23

score 0 · Answer 2 · answered Mar 09 '17 at 09:46

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

How to parse value with rivets.js?

2 Answers2