Question

我正在尝试在模板中的某个span标记中调用css类，但它似乎无法正常工作

这是我的viewmodel：

var data = [
    {
     'id': '1',
     'firstName': 'Megan',
     'lastName': 'Fox',
     'picture': 'images/01.jpg',
     'bio': 'Megan Denise Fox w' 
    },
    {
     'id': '1',
     'firstName': 'asdf',
     'lastName': 'asdf123',
     'picture': 'images/02.jpg',
     'bio': 'hwkhjkds lkawhkhkbs iklhskjha' 
    }
];

var viewModel = {
    people: ko.observableArray(data),
    myClass: ko.observable('test')
};
ko.applyBindings(viewModel);

这是我的观点：

<h1>Profile Viewer</h1>
<div id="profilesTabViewer">
    <ul id="profileTab" data-bind="template: { name: 'profileListTemplate', 
                                               foreach: people }">
    </ul>        
</div>

<script type="text/html" id="profileListTemplate">
    <li>
        <span data-bind="text: firstName, css: myClass"></span>            
    </li>
</script>

我已经在http://jsfiddle.net/du3QX/11/

中分享了代码

Answer 1

您的绑定不正确。您正在使用myClass属性，该属性应该是people可观察数组中的项。但是，根据您的视图模型，myClass是root viewModel：

的属性

因此，您应该在绑定中添加$root或$parent上下文（在您的情况下可以使用任何内容）：

<span data-bind="text: firstName, css: $root.myClass"></span>

<强>更新

我更改了您的demo，这是正确的。

Answer 2

myClass绑定中的问题。

绑定到模板的ViewModel是people的对象而不是根/父ViewModel，例如在第一个循环中它将是

{
    'id': '1',
    'firstName': 'Megan',
    'lastName': 'Fox',
    'picture': 'images/01.jpg',
    'bio': 'Megan Denise Fox w'
}

现在您看到它没有名为myClass的此类属性（它只存在于根/父ViewModel中）。

因此，您需要将profileListTemplate模板中的绑定更改为：

<span data-bind="text: firstName, css: $parent.myClass"></span>

OR

<span data-bind="text: firstName, css: $root.myClass"></span>

无法使用knockout绑定模板中的css类

2 个答案: