Ractivejs 根据Ractive中的选择更新“进度条”

我是Ractive.js的新手。我基本上想要实现的是，根据组合框中的id选择，更新相应的进度条

在下面的示例中，有两个进度条和4个按钮+25、+10、-25、-10。用户可以先选择任何进度条，然后按下任何按钮，如+25等。当用户执行此操作时，相应的进度条应首先更新为25

我已经尝试过，但不确定如何根据进度条选择来选择上下文。在我的情况下，无论我在选择框中选择了什么，两个进度条都会得到更新。请让我知道如何解决此问题，并告诉我是否有办法清理代码，如ng repeat等

请参阅中的代码

---

这里的诀窍是跟踪选择了哪个进度条，以及您正在使用selectedProgress值执行的操作，并使用它来确定要更新的值

另一个诀窍是：每当你发现自己一遍又一遍地编写相同或相似的代码时，这通常是一个迹象，表明你可以将某些东西抽象到一个函数中，或循环所谓的“不要重复自己”规则，或是干涸。在这种情况下，我们可以将进度条移动到重复的部分中。这样做之后，将进度条的值与名称保持在同一个对象中就更有意义了，比如{name:'first'，value:0}，因为这样，当我们迭代progressbar对象时，我们就可以使用{{value}}引用该进度条的值，而不必从其他地方检索该值

出于同样的原因，我们可以避免重新编写更新值的逻辑，方法是使用单个函数（让我们调用它调整）并直接从模板调用它：

var ractive=新ractive{ el:document.body， 模板：“模板”， 数据：{ 进度条：[ //请注意no`id`字段–在中，我们可以 //使用当前索引 {name:'first'，值：0}， {name:'second'，值：0} //等等。。。 ], 金额：[+25、+10、-10、-25] }, 调整：功能d{ var selected=this.get“selectedProgress”； 如果选择==空返回； var keypath='progressbars['+selected+'].value'； 这是add keypath，d； } }; {{每个金额} {{this>0？'+'：}}{{{this}} {{/每个}} 现在，每当单击未选择进度条而被禁用的按钮时，将使用金额数组中的当前金额调用调整功能，即此

---

所有这些都比描述容易，所以这里有一个更新的提琴：

谢谢Ryan，但我这里有一个问题。我已经根据您的示例更新了我的JSFIDLE。我添加了setValue方法来检查边界情况，即如果值低于0，它将保持为0%，并且不会显示在-ve value中。setValue方法只检查值是否小于0，如果值为负，则返回0。但是，我希望我的setValue方法也更新值。基本上，我不希望值也低于0。我已经在下面更新了我的JSFIDLE PS：感谢您在github上结束这个问题。我不知道这两个论坛都是由相同的人管理的。为了修复它，我已经更新了代码。它仍然有setValue函数。同时它还更新了adjust方法。在这个方法中，我检查keypath值是否小于0，并相应地设置值。请参阅下面的代码。有没有更好的办法。最好在adjust函数中进行验证，即value=Math.max0，this.getkeypath+d；this.setkeypath，value–将模板中的函数视为只读函数。这样，您就不需要setValue函数，而且模型和视图之间也不会出现不同步的危险

.progress-bar {
 position: relative;
 width: 200px;
 height: 40px;
 border: 1px solid black;
 }
.progress-bar-fill {
 height: inherit;
 background-color: orange;
}    

.progress-bar-fill-red {
height: inherit;
background-color: red;  
}
.progress-label {
position: relative;
top: 3px;
left: 5px;
color: #000;
}
input[type=range] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
/* essentially making range slider invisible */
opacity: 0;
}