用于值之间双向关系的JavaScript框架/库

我需要实现一个复杂的表单。例如，在该总和中有总和、总和和每个总和的百分比字段。说明：

Value1:  1    10%
Value2:  4    40%
Value3:  5    50%
Sum:    10   100%

现实生活中的例子要复杂得多。一切都是可编辑的。 因此，我假设几种情况：

编辑值将更新百分比和总和

编辑总和将根据其百分比更新值

编辑百分比会将所有其他百分比更新为100%，这本身会更新所有值和总和

我目前正在尝试使用Backbone.js实现类似的东西（只是因为我熟悉它），但是这个解决方案看起来已经过了设计阶段，我才刚刚开始

我想知道，还有什么其他的方法可以研究吗？ 我不是FRP人员，但功能性/反应性方法可能会有所帮助

---

如果有一个框架或库设计用于解决此类问题，我很乐意研究它。

既然你说其他框架是可以接受的，我在下面创建了一个jQuery解决方案

准则#3有点模棱两可，因此如果需要更改，请告诉我：

$（'.val'）.change（函数（）{
var-tot=0；
$（'.val'）。每个（函数（）{
tot+=parseInt（$（this）.val（），10）；
});
$（'sum'）.val（总计）；
$（'.pct'）。每个（函数（索引）{
$（this.val（（$（'.val'）[index].value/tot*100.toFixed（0））；
$（this.data（'prevValue'，$（this.val（））；
$（此）.data（'index'，index）；
});
});
$（'#sum'）。更改（函数（）{
var sum=$（this.val（）；
$（'.val'）。每个（函数（索引）{
$（this.val（$（'.pct'）[index].value*sum/100）；
});
});
$（'.pct'）.change（函数（）{
var index=$（this.data（'index'）；
var prevValue=$（this.data（'prevValue'））
$（'.val'）[index].value=（$（'.val'）[index].value*$（this.val（）/prevValue）.toFixed（0）；
$（'.val'）.change（）；
});
$（'.val'）.change（）
.val、.pct、#sum、tpct{
宽度：3em；
文本对齐：右对齐；
}
th{
文本对齐：右对齐；
}

值1:%
值2:%
值3:%
总数：100%
不久前，我使用实现了类似的任务

请找出我的例子-

主要途径是：

为值、进位和和创建事件流

var streamVal = Kefir.fromBinder(function (emitter) {
    function handler() {
        var values = $.map($table.find('.val'), function (ele) {
            return $(ele).val();
        });
        emitter.emit(values);
    }
    $table.on('change', '.val', handler);
    return function () {
        $table.off('change', '.val', handler);
    };
});


实现您的业务逻辑，根据流中的数据将更改应用于其他字段

就这些。就像画一只猫头鹰一样简单。：-）
 似乎是约束编程的任务。我建议你看一看#3的这篇演讲
，如果第一个百分比增加了10%，其他百分比应该如何变化？应该从每一项中减去5%吗？我认为AngularJS更适合你的情况。这可能会对你有所帮助。这个看起来不错，但我发现缺少文档。关于这个图书馆有没有复杂的文档或书籍？