根据 Ractive 中的选择更新 "progress bar"

Question

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

在下面的示例中，有两个进度条和 4 个按钮（+25、+10、-25、-10）。用户可以 select 任何进度条（比如 "first"），然后按任何按钮，如 +25 etc.When 用户执行此操作，应更新适当的进度条（在这种情况下 "first" 说“25”）。

我已经尝试过，但我不确定如何select 基于进度条的上下文 selection.In 我的情况，无论我在 select 中编辑了什么，两个进度条都会更新26=] 框。请告诉我如何解决这个问题，并告诉我是否有清理代码的方法（比如 ng-repeat 等）

请看See full code here....

中的代码

.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 值），并使用它来确定要更新的值。

另一个技巧：任何时候你发现自己一次又一次地编写相同（或相似）的代码，通常这表明你可以将某些东西抽象成一个函数或循环（所谓的不要重复自己规则，或 DRY）。在这种情况下，我们可以将进度条移动到重复的部分。这样做之后，将进度条的值保留在与名称相同的对象中更有意义，例如 { 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}}

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

所有这些都更容易展示而不是描述，所以这里有一个更新的fiddle：http://jsfiddle.net/rich_harris/k8vpcv27/

根据 Ractive 中的选择更新 "progress bar"

Update "progress bar" based on selection in Ractive

ractivejs