淘汰赛 foreach css 多类 $data答案

【问题标题】：knockout foreach css multiple classes $data淘汰赛 foreach css 多类 $data
【发布时间】：2013-01-04 10:52:19
【问题描述】：

在这个例子中，我有两个额外的 css 类要添加到 DIV。

    <div data-bind="foreach: [{name: 'Hello', size:'Triple'}]">
      <div class="tile"
       data-bind="css: {'tile-selected': true, $data.size : true}">
      </div>
    </div>

第一个是基于布尔值的“瓦片选择”。这很好用。

第二个实际上是一个类'Triple'的名称，（在这个例子中，总是添加它，即'True'）

我得到错误：

未捕获的错误：无法解析绑定。消息：SyntaxError: Unexpected token .; 绑定值：css: {'tile-selected': true, $data.size : true}

我假设我不能使用 $data.size 部分从 'size' 属性中提取 'Triple' 文字。有没有办法我可以做到这一点？（$data['size'] 似乎也不起作用）

【问题讨论】：

$data.size 的类型是什么？它是可观察的吗？
$data 不是 foreach 的当前迭代吗？
是的，我问的是尺寸。
size 是第一个 div 中硬编码数组的属性

标签： css knockout.js

【解决方案1】：

您不能将 ko 可观察对象或属性用作类名。相反，您必须为此创建一个单独的属性，并将其用于动态 css 绑定，如下所示。

<div data-bind="css: sizeCSS">   Profit Information</div> 

var viewModel = {
/// some view model properties here.
        };

viewModel.sizeCSS = ko.computed(function() {
    return this.size();
}, viewModel);

编辑：在此处查看动态 CSS 绑定示例：http://knockoutjs.com/documentation/css-binding.html

【讨论】：

我发现的一点是，你不能将属性作为 css 类名，这并不完全正确。您可以在模板中使用它们时...
@RonWeston 是css绑定还是类绑定？如果是css绑定，可以分享一下示例吗？