knockout.js文档显示了这样的css绑定：
@H_404_2@<div data-bind="css: { profitWarning: currentProfit() < 0 }">
Profit Information
</div>
我需要适应它来改变在mouseclick上的css类.我该怎么做？
根据以下答案,我使用的代码如下：
@H_404_2@// 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：
@H_404_2@<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组合在同一个元素上.例如：
@H_404_2@<div databind="click: changeClass,css: { myclass: newClass() == true }"></div>