在knockout.js中更改css类在鼠标点击 [英] Changing css class in knockout.js on mouse click
本文介绍了在knockout.js中更改css类在鼠标点击的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
knockout.js文档以如下方式显示css绑定:
The knockout.js documentation shows the css binding like this:
<div data-bind="css: { profitWarning: currentProfit() < 0 }">
Profit Information
</div>
我需要调整它来改变mouseclick上的css类。我如何做到这一点?
I need to adapt it to change the css class on mouseclick. How can I do this?
根据下面的答案,我使用一些代码:
Based on answers below, I am using some code like this:
// 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);
};
};
但是,这并不会扩展选择列表的宽度。我做错了什么?
However, this is not expanding the width of the select list. What am I doing wrong?
推荐答案
让你的click函数改变一个observable变量。 示例:
Have your click function change an observable variable. For 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>
注意:您可以结合单击
code> css 。例如:
Note: You can combine click
and css
on the same element. For example:
<div databind="click: changeClass, css: { myclass: newClass() == true }"></div>
这篇关于在knockout.js中更改css类在鼠标点击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文