knockout.js文档显示了这样的css绑定：
<div data-bind="css: { profitWarning: currentProfit() < 0 }">
Profit information
</div>
我需要适应它来改变在mouseclick上的css类.我该怎么做？
根据以下答案,我使用的代码如下：
// CSS class to be applied
<style>
.bigclass
{
width: 200px;
}
</style>
// Select list inside a jquery .tmpl
<script id='criteriaRowTemplate' type='text/html'>
<tr>
<td>
<select data-bind='click: makeBig,css: {bigclass : SelectHasFocus() > 0}' />
</td>
</tr>
</script>
// Knockout.js viewmodel
var CriteriaLine = function() {
this.SearchCriterion = ko.observable();
this.SelectHasFocus = ko.observable(0);
// this method is called
makeBig = function(element) {
this.SelectHasFocus(1);
};
};
但是,这并不是扩大选择列表的宽度.我究竟做错了什么？
解决方法
让你的点击功能改变一个可观察的变量.对于
example：
<div data-bind="css: { myclass: newClass() == true }">
Profit information
</div>
<button data-bind="click: changeClass">Change Class</button>
<script type="text/javascript">
var viewmodel = {
newClass: ko.observable(false),changeClass: function() {
viewmodel.newClass(true);
}
};
</script>
注意：您可以将click和css组合在同一个元素上.例如：
<div databind="click: changeClass,css: { myclass: newClass() == true }"></div>