如何用rivets.js解析值？

Question

我使用的是基于Django的Dashing框架。

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