Question

我是Ractive.js的新手。我基本上想要实现的是基于id选择（从组合框中），更新适当的进度条。

在下面的示例中，有两个进度条和4个按钮（+ 25，+ 10，-25，-10）。用户可以选择任何进度条（比如“第一个”），然后按任意按钮，如+25等。当用户执行此操作时，应更新相应的进度条（在本例中为“first”，说“25”）。

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

中的代码

.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;
}

Answer 1

这里的技巧是跟踪选择了哪个进度条（您使用selectedProgress值执行的操作），并使用它来确定要更新的值。

另一个技巧：任何时候你发现自己一次又一次地编写相同（或类似）的代码，它通常一个标志，你可以将某些东西抽象成一个函数或循环（所谓的不要重复自己的规则，或干。）。在这种情况下，我们可以将进度条移动到重复的部分。完成后，将进度条的值保持在与名称相同的对象中更有意义，例如{ name: 'first', value: 0 }，因为这样，当我们重复遍历progressbar个对象时，我们可以使用{{value}}来引用该进度条的值，而不必从其他地方检索该值。

出于同样的原因，我们可以通过使用单个函数（让它调用它adjust）并直接从模板中调用它来避免重写更新值的逻辑：

var ractive = new Ractive({ el: document.body, template: '#template', data: { progressbars: [ // notice no `id` field – in the <select>, we can just // use the current index { name: 'first', value: 0 }, { name: 'second', value: 0 } // and so on... ], amounts: [ +25, +10, -10, -25 ] }, adjust: function ( d ) { var selected = this.get( 'selectedProgress' ); if ( selected == null ) return; var keypath = 'progressbars[' + selected + '].value'; this.add( keypath, d ); } });

{{#each amounts}} <button disabled='{{selectedProgress == null}}' on-click='adjust(this)'>{{this > 0 ? '+' : ''}}{{this}}</button> {{/each}}

现在，只要单击按钮（如果您还没有选择进度条就被禁用），则会调用adjust函数，并使用amounts数组中的当前数量（即this）。

所有这些都比描述更容易展示，所以这里有一个更新的小提琴：http://jsfiddle.net/rich_harris/k8vpcv27/

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

1 个答案: