在鼠标单击时更改 knockout.js 中的 css 类答案

【问题标题】：Changing css class in knockout.js on mouse click在鼠标单击时更改 knockout.js 中的 css 类
【发布时间】：2012-06-29 09:35:00
【问题描述】：

knockout.js 文档显示 css 绑定如下：

<div data-bind="css: { profitWarning: currentProfit() < 0 }">   
    Profit Information
</div>

我需要调整它以更改鼠标单击时的 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);            
    };        
};

但是，这并没有扩大选择列表的宽度。我做错了什么？

【问题讨论】：

我假设您在文档加载后的某个地方有ko.applyBindings(CriteriaLine())，对吧？您的代码如here 所示工作。

标签： javascript jquery css knockout.js

【解决方案1】：

最简单的方法是使用 click binding 来更改回调中的 observable。您可以使用 attr binding

之类的方式适当地绑定该类

【讨论】：

感谢您的回答。如果您可以提供示例代码，我将非常感激，特别是如果它涉及选择列表。我需要使用css类来增加整个选择列表的宽度。
我添加了一些示例代码，但它不起作用。你知道出了什么问题吗？
这可能只是为堆栈溢出准备代码的工件，但 makeBig 是私有的，绑定无法访问。将 makeBig = function... 更改为 this.makeBig = function...
感谢 daedalus28 但正在调用 makeBig 方法。我里面有一个警报，它确实弹出了所需的文本。不过，我不确定是否正在评估 SelectHasFocus() > 0，因为它在视图模型之外和模板中。
为什么不将 SelectHasFocus 设为 bool 呢？然后你可以只使用 SelectHasFocus 而不是 currentProfit()

【解决方案2】：

让你的点击函数改变一个可观察的变量。对于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>

【讨论】：

感谢@Pakman 的回复。我尝试了类似于您的代码，但它不起作用。我在原始问题中添加了代码。你能看看出了什么问题吗？

【解决方案3】：

我觉得问题出在脚本标签上。

请在以下链接中找到解决方案：http://jsfiddle.net/ZmU6g/3/

【讨论】：

除了jsfiddle之外，也许您可以在此处发布解决方案以方便参考？