在knockout中修改data-bind内的值

Question

我正在使用淘汰赛开发一个页面。我已将数组绑定到html，如下所示

数据：

{'options':[{'name':'hi'},{'name':'hello'}])

HTML：

 <div data-bind="foreach: options">
       <div data-bind="text: name, css: name"></diV>
    </div>

每个选项都有一个图像，我使用的是css sprites。而且类名就像

  

div.option - <name>

的CSS：

div.option-hi{
  background-color:black;
}
div.option-hello{
  background-color:black;
}

所以这只有在我可以追加

的情况下才有效

  

“div.option - ”

到里面的name属性 数据绑定。无论如何，我可以在不修改数组并将另外一个属性添加到填充数组

的情况下实现此目的

Answer 1

如果您不打算更改数组值或将它们包装到将执行其他逻辑的视图模型中，那么您也可以直接在绑定中编写表达式。

所以你可以在css绑定中进行字符串连接：

<div data-bind="foreach: options">
    <div data-bind="text: name, css: 'option-' + name"></div>
</div>

演示JSFiddle。